12/09
2015

##canvas学习

  1. 各浏览器的限制
  2. 性能相关
  3. 一些demo

###1. 各浏览器的限制 http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/#comments

  1. chrome (版本 46.0.2490.80 (64-bit))

    最大面积:268, 435, 456 px^2 = 16, 384 px * 16, 384 px

    最大宽/高:32, 767 px

  2. firefox (版本 42.0)

    最大面积:32, 767 px * 16, 384 px

    最大宽/高:32, 767px

  3. safari (版本 9.0.1 (11601.2.7.2))

    最大面积: 268, 435, 456 px^2 = 16, 384 px * 16, 384 px

  4. ie 10(版本 10.0.9200.17414)

    最大宽/高: 8, 192px * 8, 192px

###2. 性能相关

  1. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
  2. http://www.cnblogs.com/iamzhanglei/archive/2011/11/29/2267868.html

提高canvas的性能,要关注以下一些要点:

  1. 在offscreen canvas上预渲染,如果一帧需要计算的时间过长,在另一个相同大小的offscreen canvas上预渲染,然后在下一桢上复制到显示的canvas上。
  2. 不要使用浮点坐标,用整数去代替。
  3. 不要在drawImage中缩放图片,应该在offscreen canvas缓存变化多样的图片大小。
  4. 对于复杂的场景,使用多个canvas层叠代替。一些canvas场景经常变化,而另一些却不改变。
  5. 对于大的背景图,应该使用div+background,可以避免每一帧上都要在canvas上drawImage背景图。
  6. 优化代码,尽量少调用canvas Api
  7. 尽量少的改变canvas的状态。
  8. 重新渲染的范围尽量小。
  9. 尽量不要使用阴影。
  10. 使用requestAnimationFrame制作游戏动画。

###3 一些demo

  1. HTML5 实现橡皮擦的擦除效果(http://www.cnblogs.com/axes/p/3850309.html)
作者:teazean 文章地址: