Canvas 动态创建多个图层

2019-08-14  本文已影响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();
上一篇 下一篇

猜你喜欢

热点阅读