美文网首页
Canvas 动态创建多个图层

Canvas 动态创建多个图层

作者: 章鱼要回家 | 来源:发表于2019-08-14 18:31 被阅读0次
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var layer1=document.createElement('canvas');
layer1.width=800;
layer1.height=600;
var layer1_canvas=layer1.getContext('2d');
var layer2=document.createElement('canvas');
layer2.width=800;
layer2.height=600;
var layer2_canvas=layer1.getContext('2d');
    
    
    layer1_canvas.beginPath();
    layer1_canvas.arc(200,100,20,0,Math.PI*2);
    layer1_canvas.closePath();
    layer1_canvas.fill();   

    layer2_canvas.beginPath();
    layer2_canvas.arc(100,100,50,0,Math.PI*2);
    layer2_canvas.closePath();
    layer2_canvas.fill();
    
ctx.save()//用来显示的canvas
ctx.globalCompositeOperation="destination-over";//设置多个图层如何混合,这个可以百度canvas混合模式,这个和PS是相近的
ctx.drawImage(layer1,0,0,800,600,0,0,800,600)
ctx.drawImage(layer2,0,0,800,600,0,0,800,600)
ctx.restore();

相关文章

网友评论

      本文标题:Canvas 动态创建多个图层

      本文链接:https://www.haomeiwen.com/subject/rpngjctx.html