你必须知道的10个提高Canvas性能技巧
你还在抱怨自己写的canvas demo徘徊在10帧以下吗?你还在烦恼打开自己写的应用就听见CUP风扇转吗?你正在写一个javascript Canvas库吗?那么下面九点就是你必须知道的!
一.预渲染
错误代码:
var canvas = document.getElementById("myCanvas");
var context = this.canvas.getContext('2d');
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
drawMario(context);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
正确代码:
var canvas = document.getElementById("myCanvas");
var context = this.canvas.getContext('2d');
var m_canvas = document.createElement('canvas');
m_canvas.width = 64;
m_canvas.height = 64;
var m_context = m_canvas.getContext('2d');
drawMario(m_context);
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
context.drawImage(m_canvas, 0, 0);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
这里m_canvas的宽度和高度控制得越小越好。
二.尽量少调用canvasAPI
错误代码:
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状态
错误代码:
for (var i = 0; i < STRIPES; i++) {
context.fillStyle = (i % 2 ? COLOR1 : COLOR2);
context.fillRect(i * GAP, 0, GAP, 480);
}
正确代码:
context.fillStyle = COLOR1;
for (var i = 0; i < STRIPES / 2; i++) {
context.fillRect((i * 2) * GAP, 0, GAP, 480);
}
context.fillStyle = COLOR2;
for (var i = 0; i < STRIPES / 2; i++) {
context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);
}
四.重新渲染的范围尽量小
错误代码:
context.fillRect(0, 0, canvas.width, canvas.height);
正确代码:
context.fillRect(20, 20, 100, 100);
五.复杂场景使用多层画布
<canvas width="600" height="400" style="position: absolute; z-index: 0">
</canvas>
<canvas width="600" height="400" style="position: absolute; z-index: 1">
</canvas>
六.不要使用阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillRect(20, 20, 150, 100);
七.清除画布
详细性能差别:
http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters
一般情况下:clearRect的性能优于fillRect优于canvas.width = canvas.width;
八.像素级别操作尽量用整数
几种取整数的方法:
rounded = (0.5 + somenum) | 0;
rounded = ~ ~(0.5 + somenum);
rounded = (0.5 + somenum) << 0;
九.使用requestAnimationFrame制作游戏或动画
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
} if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
}; if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
} ());
十.其他
与渲染无关的计算交给worker
复杂的计算交给引擎(自己写,或者用开源的),比如3D、物理
缓存load好的图片,canvas上画canvas,而不是画image
你必须知道的10个提高Canvas性能技巧的更多相关文章
- 前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
- 你必须知道的10个Python第三库
1. BeautifulSoup Beautiful Soup是一个可以从HTML,XML进行提取文件的Python库,日常我们使用爬虫进行数据抓取回来之后,往往需要进行数据解析. 使用它能让你开心愉 ...
- 比较TFS与SVN,你必须知道的10点区别
相比SVN,对于TFS的优点我有以下几点看法,供大家参考: 1. 总体比较: TFS是一个应用软件生命周期管理(ALM)软件,是一个软件研发平台产品,其功能覆盖了软件研发过程中的所有环节(包括源代 ...
- Web开发者必须知道的10个jQuery代码片段
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
- Java程序员必须知道的10个调试技巧
调试可以帮助识别和解决应用程序缺陷,在本文中,将使用大家常用的的开发工具Eclipse来调试Java应用程序. 但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运 ...
- 关于HTML5你必须知道的28个新特性,新技巧以及新技术
1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcapt ...
- 28个你必须知道的HTML5的新特性,技巧以及技术
原文地址:http://adamlu.com/?p=584#header 总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式 ...
- Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor
Webservice WCF WebApi 注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
随机推荐
- vnc server on Ubuntu
Virtual Network Computing(VNC)是进行远程桌面控制的一个软件.客户端的键盘输入和鼠标操作通过网络传输到远程服务器,控制服务器的操作 (只有背景,没有菜单栏问题没有解决) ...
- 自然语言交流系统 phxnet团队 创新实训 个人博客 (三)
因为需要处理自然语言的括号切分问题,专门记录下. import java.util.Scanner; import java.util.Stack; /** * @author Owner * */ ...
- python-函数中的参数类型和可变参数解析
最近,在学习python,天天抱着廖雪峰的教材苦练,https://www.liaoxuefeng.com/ 但廖老毕竟是如此的才华盈溢,我这等小辈真是读起来教程都有些费力. 关于python-函数中 ...
- C#提高-------------------Assembly和Module的使用-------反射内涵
转 :C#反射技术概念作用和要点 反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以 ...
- java Object类源代码详解 及native (转自 http://blog.csdn.net/sjw890821sjw/article/details/8058843)
package java.lang; public class Object { /* 一个本地方法,具体是用C(C++)在DLL中实现的,然后通过JNI调用.*/ private static na ...
- Linux 系统强制踢掉登录用户并禁止用户再次登录系统
标注:创建一个test测试用户,test用户使用Xshel工具ssh远程登录linux操作系统. 强制踢掉登录用户方法一: [root@cloucentos6 ~]# w ...
- Java虚拟机性能管理神器 - VisualVM(2) 入门
一下载VisualVM 最新版本下载 历史版本下载 二启动VisualVM 三VisualVM用户目录 四VisualVM窗口 1应用程序窗口 2详情窗口 五VisualVM插件 Java虚拟机性 ...
- tomcat启动时设定环境变量
在tomcat的bin目录中修改startup.bat 设置CATALINA_HOME set "CATALINA_HOME=F:\solr\apache-tomcat\apache-tom ...
- level 1 -- unit 4 -- where 引导的疑问句
where be sb/sth 询问地点,用where where is the restaurant? where are my socks ? where was tome just now? w ...
- Alpine Linux:如何配置GUI的图形桌面环境:x Desktop Environment
alpine linux 真是不错.小巧.迅捷! 官方的各个版本的alpine镜像内没有带图形环境的.那我们如何构建自己的桌面图形环境呢? 其实:这个问题,在起官网的wiki内有指南,我们根据那些相关 ...