<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>