最近开始学习canvas,其中遇到一些问题,以及一些总结,如下:
1. 看过不少源码(大多是比较简单的示例),发现canvas对于鼠标、键盘事件的处理,都是采用重新绘制canvas
其中重绘一般有两种方式:
- context.clearRect(0, 0, width, height)
- context.canvas.width = context.canvas.width
通过性能对比,推荐第一种方式重绘
参见:http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters
2. 一些相关优化方案
参见:http://www.cnblogs.com/iamzhanglei/archive/2011/11/29/2267868.html
3. measureText
不同浏览器的默认字体不一定一致,致使获取的值不一定相等。
解决办法:设置默认字体,比如:context.font = "normal 12px Arial"
4. 用canvas绘制text,明显发现很是痛苦。。。(看kinetic.js的源码发现,它对text的处理也是比较恶心。。。,也许这就是canvas的特点)
对比css实现文本排版,canvas的文本排版需要计算对应的位置
ps:需要慢慢发现canvas的美
5.