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 相关文章推荐
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
自荐书模板
2013/12/15 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
《云房子》教学反思
2014/04/20 职场文书
排查整治工作方案
2014/06/09 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
捐助倡议书
2015/01/19 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL