HTML5 Canvas的性能提高技巧经验分享


Posted in HTML / CSS onJuly 02, 2013

使用缓存技术实现预绘制,减少重复绘制Canvs内容
很多时候我们在Canvas上绘制与更新,总是会保留一些不变的内容,对于这些内容
应该预先绘制缓存,而不是每次刷新。
直接绘制代码如下:

复制代码
代码如下:

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press <Esc> to exit game",5,50);
requestAnimationFrame(render);

使用缓存预绘制技术:
复制代码
代码如下:

function render(context) {
context.drawImage(mText_canvas, 0, 0);
requestAnimationFrame(render);
}
function drawText(context) {
mText_canvas = document.createElement("canvas");
mText_canvas.width = 450;
mText_canvas.height = 54;
var m_context = mText_canvas.getContext("2d");
m_context.font="24px Arial";
m_context.fillStyle="blue";
m_context.fillText("Please press <Esc> to exit game",5,50);
}

使用Canvas缓存绘制技术的时候,一定记得缓存Canvas对象大小要小于实际的Canvas 大小。尽量把绘制直线点的操作放在一起,而且尽量一次绘制完成,一个不好的代码如下:
复制代码
代码如下:

for (var i = 0; i < points.length - 1; i++) {
var p1 = points[i];
var p2 = points[i+1];
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.stroke();
}

修改以后性能较高的代码如下:
复制代码
代码如下:

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
var p1 = points[i];
var p2 = points[i+1];
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
}
context.stroke();

避免不必要的Canvas绘制状态频繁切换,一个频繁切换绘制style的例子如下:
复制代码
代码如下:

var GAP = 10;
for(var i=0; i<10; i++) {
context.fillStyle = (i % 2 ? "blue" : "red");
context.fillRect(0, i * GAP, 400, GAP);
}

避免频繁切换绘制状态,性能更好的绘制代码如下:
复制代码
代码如下:

// even
context.fillStyle = "red";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2) * GAP, 400, GAP);
}
// odd
context.fillStyle = "blue";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2+1) * GAP, 400, GAP);
}

绘制时,只绘制需要更新的区域,任何时候都要避免不必要的重复绘制与额外开销。对于复杂的场景绘制使用分层绘制技术,分为前景与背景分别绘制。定义Canvas层的
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支持半个像素绘制会根据小数位实现插值算法实现绘制图像的反锯齿效果,如果没有必要请不要选择浮点数值。

清空Canvas上的绘制内容
context.clearRect(0, 0, canvas.width,canvas.height)
但是其实在Canvas还有一种类似hack的清空方法:
canvas.width = canvas.width;
也可以实现清空canvas上内容的效果,但是在某些浏览器上可能不支持。

HTML / CSS 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 #HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 #HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 #HTML / CSS
html5 input属性使用示例
Jun 28 #HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 #HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 #HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 #HTML / CSS
You might like
浅析PHP中Collection 类的设计
2013/06/21 PHP
php二维数组排序详解
2013/11/06 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
总经理检讨书
2014/09/15 职场文书
师范生见习报告范文
2014/11/03 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
贫困证明书范文
2015/06/16 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers