美文网首页
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