案例：html/html5 案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
canvas
6
{
7
border:1px solid #d3d3d3;
8
margin-right:10px;
9
margin-bottom:20px;
10
}
11
</style>
12
</head>
13
<body>
14
​
15
<script>
16
​
17
var gco=new Array();
18
gco.push("source-atop");
19
gco.push("source-in");
20
gco.push("source-out");
21
gco.push("source-over");
22
gco.push("destination-atop");
23
gco.push("destination-in");
24
gco.push("destination-out");
25
gco.push("destination-over");
26
gco.push("lighter");
27
gco.push("copy");
28
gco.push("xor");
29
for (n=0;n<gco.length;n++)
30
    {
31
    document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
32
    var c=document.createElement("canvas");
33
    c.width=120;
34
    c.height=100;
35
    document.getElementById("p_" + n).appendChild(c);
36
    var ctx=c.getContext("2d");
37
    ctx.fillStyle="blue";
38
    ctx.fillRect(10,10,50,50);
39
    ctx.globalCompositeOperation=gco[n];
40
    ctx.beginPath();
41
    ctx.fillStyle="red";
42
    ctx.arc(50,50,30,0,2*Math.PI);
43
    ctx.fill();
44
    document.write("</div>");
45
    }
46
​
47
</script>
48
​