HTML5 canvas 合成属性

合成属性

globalAlpha                                设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation                设置或返回新图像如何绘制到已有的图像上

    <script type="text/javascript">
    var arr=new Array();
    arr.push("source-atop");       
    arr.push("source-in");
    arr.push("source-out");
    arr.push("source-over");
    arr.push("destination-atop");
    arr.push("destination-in");
    arr.push("destination-out");
    arr.push("destination-over");
    arr.push("lighter");
    arr.push("copy");
    arr.push("xor");
    for (var i=0;i<arr.length;i++){
            document.write("<div id='p_"+ i +"'style='float:left;border:1px solid #000'>"+arr[i]+":<br>");
            var c=document.createElement("canvas");
            c.width=120;
            c.height=100;
            document.getElementById("p_"+i).appendChild(c);
            var ctx=c.getContext("2d");
            ctx.fillStyle="blue";
            ctx.fillRect(10,10,50,50);
            ctx.globalCompositeOperation=arr[i];//设置或返回新图像如何绘制到已有的图像上
            ctx.beginPath();
            ctx.fillStyle="red";
            ctx.globalAlpha=0.8;        //设置或返回绘图的当前 alpha 或透明值
            ctx.arc(50,50,30,0,2*Math.PI);
            ctx.fill();
            document.write("</div>");
    }
    </script>