搜索
首页数据库mysql教程你必须知道的10个提高Canvas性能技巧

你必须知道的10个提高Canvas性能技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 07, 2016 pm 03:05 PM
canvas性能技巧提高知道

你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！ 一.预渲染 错误代码： var canvas = document.getElementById( "myCanvas" ); var cont

你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！

一.预渲染

错误代码：

      <span>var </span><span>canvas = document.getElementById(</span><span>"myCanvas"</span><span>);
      </span><span>var </span><span>context = </span><span>this</span><span>.canvas.getContext(</span><span>'2d'</span><span>);
      </span><span>var </span><span>drawAsync = eval(Jscex.compile(</span><span>"async"</span><span>, </span><span>function </span><span>() {
          </span><span>while </span><span>(</span><span>true</span><span>) {
              drawMario(context);
              $await(Jscex.Async.sleep(</span><span>1000</span><span>));
          }
      }))
      drawAsync().start();
</span>

正确代码：

      <span>var </span><span>canvas = document.getElementById(</span><span>"myCanvas"</span><span>);
      </span><span>var </span><span>context = </span><span>this</span><span>.canvas.getContext(</span><span>'2d'</span><span>);
      </span><span>var </span><span>m_canvas = document.createElement(</span><span>'canvas'</span><span>);
</span><span>m_canvas.width = </span><span>64</span><span>;
      m_canvas.height = </span><span>64</span><span>;
      </span><span>var </span><span>m_context = m_canvas.getContext(</span><span>'2d'</span><span>);
      drawMario(m_context);
      </span><span>var </span><span>drawAsync = eval(Jscex.compile(</span><span>"async"</span><span>, </span><span>function </span><span>() {
          </span><span>while </span><span>(</span><span>true</span><span>) {
              context.drawImage(m_canvas, </span><span>0</span><span>, </span><span>0</span><span>);
              $await(Jscex.Async.sleep(</span><span>1000</span><span>));
          }
      }))
      drawAsync().start();
</span>

这里m_canvas的宽度和高度控制得越小越好。

二.尽量少调用canvasAPI

错误代码：

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

正确代码：

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

三.尽量少改变CANVAS状态

错误代码：

      <span>for </span><span>(</span><span>var </span><span>i = </span><span>0</span><span>; i <span>2 </span><span>? COLOR1 : COLOR2);
          context.fillRect(i * GAP, </span><span>0</span><span>, GAP, </span><span>480</span><span>);
      } 
</span></span>

正确代码：

      <span>context.fillStyle = COLOR1;
      </span><span>for </span><span>(</span><span>var </span><span>i = </span><span>0</span><span>; i <span>2</span><span>; i++) {
          context.fillRect((i * </span><span>2</span><span>) * GAP, </span><span>0</span><span>, GAP, </span><span>480</span><span>);
      }
      context.fillStyle = COLOR2;
      </span><span>for </span><span>(</span><span>var </span><span>i = </span><span>0</span><span>; i <span>2</span><span>; i++) {
          context.fillRect((i * </span><span>2 </span><span>+ </span><span>1</span><span>) * GAP, </span><span>0</span><span>, GAP, </span><span>480</span><span>);
      }
</span></span></span>

四.重新渲染的范围尽量小

错误代码：

  <span>context.fillRect(</span><span>0</span><span>, </span><span>0</span><span>, canvas.width, canvas.height); 
</span>

正确代码：

      <span>context.fillRect(</span><span>20</span><span>, </span><span>20</span><span>, </span><span>100</span><span>, </span><span>100</span><span>);
</span>

五.复杂场景使用多层画布

 <span><span>canvas </span><span>width=</span><span>"600" </span><span>height=</span><span>"400" </span><span>style=</span><span>"</span><span>position</span><span>: absolute; </span><span>z-index</span><span>: 0"</span><span>>
</span><span>canvas</span><span>>
<span>canvas </span><span>width=</span><span>"600" </span><span>height=</span><span>"400" </span><span>style=</span><span>"</span><span>position</span><span>: absolute; </span><span>z-index</span><span>: 1"</span><span>>
</span><span>canvas</span><span>>
</span></span></span>

六.不要使用阴影

      <span>context.shadowOffsetX = </span><span>5</span><span>;
      context.shadowOffsetY = </span><span>5</span><span>;
      context.shadowBlur = </span><span>4</span><span>;
      context.shadowColor = </span><span>'rgba(255, 0, 0, 0.5)'</span><span>;
      context.fillRect(</span><span>20</span><span>, </span><span>20</span><span>, </span><span>150</span><span>, </span><span>100</span><span>);
</span>

七.清除画布

详细性能差别：
http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters
一般情况下：clearRect的性能优于fillRect优于canvas.width = canvas.width;

八.像素级别操作尽量用整数

几种取整数的方法：

<span>rounded = (</span><span>0.5 </span><span>+ somenum) | </span><span>0</span><span>;
</span><span>rounded = ~ ~(</span><span>0.5 </span><span>+ somenum);
</span><span>rounded = (</span><span>0.5 </span><span>+ somenum) <span>0</span><span>;
</span></span>

九.使用requestAnimationFrame制作游戏或动画

<p></p><p>        (<span>function</span> () {<br>            <span>var</span> lastTime = 0;<br>            <span>var</span> vendors = ['ms', 'moz', 'webkit', 'o'];<br>            <span>for</span> (<span>var</span> x = 0; x                 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];<br>                window.cancelAnimationFrame =<br>          window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];<br>            }<br><br>            <span>if</span> (!window.requestAnimationFrame)<br>                window.requestAnimationFrame = <span>function</span> (callback, element) {<br>                    <span>var</span> currTime = <span>new</span> Date().getTime();<br>                    <span>var</span> timeToCall = Math.max(0, 16 - (currTime - lastTime));<br>                    <span>var</span> id = window.setTimeout(<span>function</span> () { callback(currTime + timeToCall); },<br>              timeToCall);<br>                    lastTime = currTime + timeToCall;<br>                    <span>return</span> id;<br>                };<br><br>            <span>if</span> (!window.cancelAnimationFrame)<br>                window.cancelAnimationFrame = <span>function</span> (id) {<br>                    clearTimeout(id);<br>                };<br>        } ());</p>

十.其他

与渲染无关的计算交给worker

复杂的计算交给引擎（自己写，或者用开源的），比如3D、物理

缓存load好的图片，canvas上画canvas,而不是画image

同步

本文已同步更新至：

HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
MySQL的许可与其他数据库系统相比如何？MySQL的许可与其他数据库系统相比如何？Apr 25, 2025 am 12:26 AM

MySQL使用的是GPL许可证。1）GPL许可证允许自由使用、修改和分发MySQL，但修改后的分发需遵循GPL。2）商业许可证可避免公开修改，适合需要保密的商业应用。

您什么时候选择InnoDB而不是Myisam，反之亦然？您什么时候选择InnoDB而不是Myisam，反之亦然？Apr 25, 2025 am 12:22 AM

选择InnoDB而不是MyISAM的情况包括：1)需要事务支持，2)高并发环境，3)需要高数据一致性；反之，选择MyISAM的情况包括：1)主要是读操作，2)不需要事务支持。InnoDB适合需要高数据一致性和事务处理的应用，如电商平台，而MyISAM适合读密集型且无需事务的应用，如博客系统。

在MySQL中解释外键的目的。在MySQL中解释外键的目的。Apr 25, 2025 am 12:17 AM

在MySQL中，外键的作用是建立表与表之间的关系，确保数据的一致性和完整性。外键通过引用完整性检查和级联操作维护数据的有效性，使用时需注意性能优化和避免常见错误。

MySQL中有哪些不同类型的索引？MySQL中有哪些不同类型的索引？Apr 25, 2025 am 12:12 AM

MySQL中有四种主要的索引类型：B-Tree索引、哈希索引、全文索引和空间索引。1.B-Tree索引适用于范围查询、排序和分组，适合在employees表的name列上创建。2.哈希索引适用于等值查询，适合在MEMORY存储引擎的hash_table表的id列上创建。3.全文索引用于文本搜索，适合在articles表的content列上创建。4.空间索引用于地理空间查询，适合在locations表的geom列上创建。

您如何在MySQL中创建索引？您如何在MySQL中创建索引？Apr 25, 2025 am 12:06 AM

toCreateAnIndexinMysql，usethecReateIndexStatement.1）forasingLecolumn，使用“ createIndexIdx_lastNameEnemployees（lastName）; 2）foracompositeIndex，使用“ createIndexIndexIndexIndexIndexDx_nameOmplayees（lastName，firstName，firstName）;” 3）forauniqe instex，creationexexexexex，

MySQL与Sqlite有何不同？MySQL与Sqlite有何不同？Apr 24, 2025 am 12:12 AM

MySQL和SQLite的主要区别在于设计理念和使用场景：1.MySQL适用于大型应用和企业级解决方案，支持高性能和高并发；2.SQLite适合移动应用和桌面软件，轻量级且易于嵌入。

MySQL中的索引是什么？它们如何提高性能？MySQL中的索引是什么？它们如何提高性能？Apr 24, 2025 am 12:09 AM

MySQL中的索引是数据库表中一列或多列的有序结构，用于加速数据检索。1）索引通过减少扫描数据量提升查询速度。2）B-Tree索引利用平衡树结构，适合范围查询和排序。3）创建索引使用CREATEINDEX语句，如CREATEINDEXidx_customer_idONorders(customer_id)。4）复合索引可优化多列查询，如CREATEINDEXidx_customer_orderONorders(customer_id,order_date)。5）使用EXPLAIN分析查询计划，避

说明如何使用MySQL中的交易来确保数据一致性。说明如何使用MySQL中的交易来确保数据一致性。Apr 24, 2025 am 12:09 AM

在MySQL中使用事务可以确保数据一致性。1)通过STARTTRANSACTION开始事务，执行SQL操作后用COMMIT提交或ROLLBACK回滚。2)使用SAVEPOINT可以设置保存点，允许部分回滚。3)性能优化建议包括缩短事务时间、避免大规模查询和合理使用隔离级别。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
4 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前ByDDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前ByDDD
显示更多

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7697
15
Java教程
1640
14
CakePHP 教程
1393
52
Laravel 教程
1287
25
PHP教程
1229
29
显示更多