Canvas提升性能十点注意事项

最新推荐文章于 2022-12-20 15:24:51 发布

永远的新手

最新推荐文章于 2022-12-20 15:24:51 发布

阅读量981

点赞数

分类专栏： canvas JavaScript 文章标签： canvas

本文链接：https://blog.csdn.net/learn8more/article/details/89884962

版权

本文介绍了提升Canvas性能的十个关键点，包括预渲染、减少API调用、避免频繁改变Canvas状态、限制重绘区域、使用多层画布、避免阴影、正确清除画布、进行整数像素操作、利用requestAnimationFrame做动画以及利用Web Worker和引擎优化计算。

摘要由CSDN通过智能技术生成

你还在抱怨自己写的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_con