canvas教程

提高HTML5 Canvas性能的技巧(2)

字号+ 作者:H5之家 来源:H5之家 2016-07-30 16:00 我要评论( )

[html] canvas id=bg width=640 height=480 style=position: absolute; z-index: 0 /canvas canvas id=fg width=640 height=480 style=position: absolute; z-index: 1 SPAN style=FONT-SIZE: 18px/canvas /SPAN ca


[html] <canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0"> 
</canvas> 
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"> 
<SPAN style="FONT-SIZE: 18px"></canvas> 
</SPAN> 

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
</canvas>

如果没有必要,要尽量避免使用绘制特效,如阴影,模糊等。

 


避免使用浮点数坐标。

绘制图形时,长度与坐标应选取整数而不是浮点数,原因在于Canvas支持半个像素绘制

会根据小数位实现插值算法实现绘制图像的反锯齿效果,如果没有必要请不要选择浮点数值。

 


清空Canvas上的绘制内容:

context.clearRect(0, 0, canvas.width,canvas.height)

但是其实在Canvas还有一种类似hack的清空方法:

canvas.width = canvas.width;

也可以实现清空canvas上内容的效果,但是在某些浏览器上可能不支持。

 

补充:web前端 , HTML 5 ,

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评