你还在抱怨自己写的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性能技巧的更多相关文章

  1. 前端设计师必须知道的10个重要的CSS技巧

    对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...

  2. 你必须知道的10个Python第三库

    1. BeautifulSoup Beautiful Soup是一个可以从HTML,XML进行提取文件的Python库,日常我们使用爬虫进行数据抓取回来之后,往往需要进行数据解析. 使用它能让你开心愉 ...

  3. 比较TFS与SVN,你必须知道的10点区别

      相比SVN,对于TFS的优点我有以下几点看法,供大家参考: 1. 总体比较: TFS是一个应用软件生命周期管理(ALM)软件,是一个软件研发平台产品,其功能覆盖了软件研发过程中的所有环节(包括源代 ...

  4. Web开发者必须知道的10个jQuery代码片段

    在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...

  5. Java程序员必须知道的10个调试技巧

    调试可以帮助识别和解决应用程序缺陷,在本文中,将使用大家常用的的开发工具Eclipse来调试Java应用程序. 但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运 ...

  6. 关于HTML5你必须知道的28个新特性,新技巧以及新技术

    1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcapt ...

  7. 28个你必须知道的HTML5的新特性,技巧以及技术

    原文地址:http://adamlu.com/?p=584#header 总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式 ...

  8. 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平台下, ...

  9. C#刨根究底:《你必须知道的.NET》读书笔记系列

    一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...

随机推荐

  1. vnc server on Ubuntu

    Virtual Network Computing(VNC)是进行远程桌面控制的一个软件.客户端的键盘输入和鼠标操作通过网络传输到远程服务器,控制服务器的操作   (只有背景,没有菜单栏问题没有解决) ...

  2. 自然语言交流系统 phxnet团队 创新实训 个人博客 (三)

    因为需要处理自然语言的括号切分问题,专门记录下. import java.util.Scanner; import java.util.Stack; /** * @author Owner * */ ...

  3. python-函数中的参数类型和可变参数解析

    最近,在学习python,天天抱着廖雪峰的教材苦练,https://www.liaoxuefeng.com/ 但廖老毕竟是如此的才华盈溢,我这等小辈真是读起来教程都有些费力. 关于python-函数中 ...

  4. C#提高-------------------Assembly和Module的使用-------反射内涵

    转 :C#反射技术概念作用和要点 反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以 ...

  5. java Object类源代码详解 及native (转自 http://blog.csdn.net/sjw890821sjw/article/details/8058843)

    package java.lang; public class Object { /* 一个本地方法,具体是用C(C++)在DLL中实现的,然后通过JNI调用.*/ private static na ...

  6. Linux 系统强制踢掉登录用户并禁止用户再次登录系统

    标注:创建一个test测试用户,test用户使用Xshel工具ssh远程登录linux操作系统. 强制踢掉登录用户方法一: [root@cloucentos6 ~]# w               ...

  7. Java虚拟机性能管理神器 - VisualVM(2) 入门

    一下载VisualVM 最新版本下载 历史版本下载 二启动VisualVM 三VisualVM用户目录 四VisualVM窗口 1应用程序窗口 2详情窗口 五VisualVM插件   Java虚拟机性 ...

  8. tomcat启动时设定环境变量

    在tomcat的bin目录中修改startup.bat 设置CATALINA_HOME set "CATALINA_HOME=F:\solr\apache-tomcat\apache-tom ...

  9. level 1 -- unit 4 -- where 引导的疑问句

    where be sb/sth 询问地点,用where where is the restaurant? where are my socks ? where was tome just now? w ...

  10. Alpine Linux:如何配置GUI的图形桌面环境:x Desktop Environment

    alpine linux 真是不错.小巧.迅捷! 官方的各个版本的alpine镜像内没有带图形环境的.那我们如何构建自己的桌面图形环境呢? 其实:这个问题,在起官网的wiki内有指南,我们根据那些相关 ...