canvasdrawimage，Canvas画布可以层叠吗
一、Canvas画布可以层叠吗
1.是的，canvas画布可以层叠。
2.在canvas中，层叠是通过绘制顺序来实现的。当在canvas上绘制多个元素时，后绘制的元素将覆盖先绘制的元素，从而实现层叠效果。
3.绘制顺序是由绘制操作的顺序决定的。在绘制之前，可以使用特定的方法来指定绘制的顺序。例如，可以使用`context.beginpath()`开始一个新的路径，并使用`context.fill()`或`context.stroke()`方法填充或绘制路径。后绘制的图形将覆盖先绘制的图形。
另外，还可以使用`context.globalcompositeoperation`属性来控制绘制的组合方式。通过设置该属性，可以实现更复杂的层叠效果，例如使用"source-over"将新的图形绘制在原有图形之上，或使用"destination-over"将新的图形绘制在原有图形之下。
此外，还可以使用图层技术来实现canvas画布的层叠。通过创建多个canvas元素，并将它们叠放在一起，可以在每个canvas上绘制不同的内容。然后，可以使用css的z-index属性来调整canvas元素的层叠顺序，从而实现画布的层叠效果。
二、canvas详解
canvas是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。
canvas对象表示一个HTML画布元素。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D对象获得。
这是通过canvas对象的getContext()方法并且把直接量字符串"2d"作为唯一的参数传递给它而获得的。
三、node canvas如何提高作图性能
提高画图的性能，你需要了解以下几点：
1、预渲染
错误代码：
varcanvas=document.getElementById("myCanvas");
varcontext=this.canvas.getContext('2d');
vardrawAsync=eval(Jscex.compile("async",function(){
while(true){
drawMario(context);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
正确代码：
varcanvas=document.getElementById("myCanvas");
varcontext=this.canvas.getContext('2d');
varm_canvas=document.createElement('canvas');
m_canvas.width=64;
m_canvas.height=64;
varm_context=m_canvas.getContext('2d');
drawMario(m_context);
vardrawAsync=eval(Jscex.compile("async",function(){
while(true){
context.drawImage(m_canvas,0,0);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
2、尽量少调用canvasAPI
错误代码：
for(vari=0;i<points.length-1;i++){
varp1=points[i];
varp2=points[i+1];
context.beginPath();
context.moveTo(p1.x,p1.y);
context.lineTo(p2.x,p2.y);
context.stroke();
}
正确代码：
context.beginPath();
for(vari=0;i<points.length-1;i++){
varp1=points[i];
varp2=points[i+1];
context.moveTo(p1.x,p1.y);
context.lineTo(p2.x,p2.y);
}
context.stroke();
3、尽量少改变canvas的状态
错误代码：
for(vari=0;i<STRIPES;i++){
context.fillStyle=(i%2?COLOR1:COLOR2);
context.fillRect(i*GAP,0,GAP,480);
}
正确代码：
context.fillStyle=COLOR1;
for(vari=0;i<STRIPES/2;i++){
context.fillRect((i*2)*GAP,0,GAP,480);
}
context.fillStyle=COLOR2;
for(vari=0;i<STRIPES/2;i++){
context.fillRect((i*2+1)*GAP,0,GAP,480);
}
4、重新渲染的范围尽量小
错误代码：
context.fillRect(0,0,canvas.width,canvas.height);正确代码：
context.fillRect(20,20,100,100);5、复杂场景使用多层画布
<canvaswidth="600"height="400"style="position:absolute;z-index:0">
</canvas>
<canvaswidth="600"height="400"style="position:absolute;z-index:1">
</canvas>
6、不要使用阴影
context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=4;
context.shadowColor='rgba(255,0,0,0.5)';
context.fillRect(20,20,150,100);
7、清除画布
一般情况下：clearRect的性能优于fillRect优于canvas.width=canvas.width;
8、像素级别操作尽量用整数
9、使用Jscex制作动画效果
vardrawAsync=eval(Jscex.compile("async",function(){
while(true){
context.drawImage(m_canvas,0,0);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
10、其它
与渲染无关的计算交给worker，复杂的计算交给引擎（自己写，或者用开源的），比如3D、物理。缓存load好的图片，canvas上画canvas,而不是画image。
自己多积累经验，使程序运行的消耗减少到最小就好的。