Javascript 优化HTML5画布

为什么当我绘制

2000图像和更多图像时，
html5画布变得非常慢？

如何优化它？
这是我制作的一个演示，通过在画布上单击鼠标左键禁用“安全模式”，然后开始移动鼠标，直到绘制了约2000幅图像


var img=new Image（）
img.src=”http://i.imgur.com/oVOibrL.png";
img.onload=牵引；
var canvas=$（“canvas”）[0]；
var ctx=canvas.getContext（“2d”）
var cnv=$（“画布”）；
var draw=[]；
$（“画布”）.mousemove（添加）
功能添加（事件）{
push（{x:event.clientX，y:event.clientY}）
}
canvas.width=cnv.width（）；
canvas.height=cnv.height（）；
var-safe=true；
contextmenu（函数（e）{e.preventDefault（）}）
cnv.mousedown（函数（事件）{
如果（event.which==1）安全=！安全；
if（event.which==3）draw=[]
});
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
请求动画帧（绘制）；
用于（提取的变量i）{
ctx.drawImage（img、i.x、i.y）
}   
如果（safe&&draw.length>300）draw=[]
ctx.fillText（“图像计数：”+绘制长度，10,50）；
ctx.fillText（“左键单击以切换300个图像的限制”，10,70）；
ctx.fillText（“右键单击以清除画布”，10,90）；
}
Draw（）
正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
位置：绝对位置；
}
帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：999999999；
光标：无；
}
使用实际代码的简单方法：

不要以这种速率重新绘制所有图像。
因为在您的示例中，图像是静态的，所以实际上不需要在每一帧都重新绘制所有内容：只需绘制最新的图像。

此外，如果出现了其他图形（例如文本），您可能希望仅对图像使用屏幕外画布，您将在屏幕上画布+其他图形上重新绘制


var img=new Image（）
img.src=”http://i.imgur.com/oVOibrL.png";
img.onload=牵引；
var canvas=$（“canvas”）[0]；
var ctx=canvas.getContext（“2d”）
var cnv=$（“画布”）；
var draw=[]；
$（“画布”）.mousemove（添加）
功能添加（事件）{
拉.推({
x:event.clientX，
y:event.clientY
})
}
canvas.width=cnv.width（）；
canvas.height=cnv.height（）；
//为图像创建画布的屏幕外克隆
var imgCan=canvas.cloneNode（）；
var imgCtx=imgCan.getContext（'2d'）；
var=0；//一个计数器，知道我们要画多少图像
var-safe=true；
cnv.上下文菜单（功能（e）{
e、 预防默认值（）
})
cnv.mousedown（函数（事件）{
如果（event.which==1）安全=！安全；
if（event.which==3）draw=[]
});
函数绘图（）{
//清除可见画布
clearRect（0，0，canvas.width，canvas.height）；
请求动画帧（绘制）；
if（draw.length）{//onm如果我们有一些对象要绘制
对于（Drawed；Drawed300）{
绘图=[]；
draw=0；//重置计数器
//清除OffCren画布
imgCtx.clearRect（0，0，canvas.width，canvas.height）；
}
//在可见画布上绘制屏幕外画布
ctx.drawImage（imgCan，0,0）；
//你看其他的图纸吗
ctx.fillText（“图像计数：”+draw.length，10,50）；
ctx.fillText（“左键单击以切换300个图像的限制”，10,70）；
ctx.fillText（“右键单击以清除画布”，10,90）；
}
Draw（）
正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
位置：绝对位置；
}
帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：999999999；
光标：无；
}
您好，谢谢您的回答。事实上，doge演示效果很好，但我忘了精确说明我的图像在我开发的真实事物中是动态的，所以我查看了你链接到的帖子，看起来不错，但似乎很难实现。是否有一个库或其他东西正在实现这一点？谢谢