案例:html/html5 案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<body>
4
5
<p>不使用 clip():</p>
6
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
7
Your browser does not support the HTML5 canvas tag.
8
</canvas>
9
10
<script>
11
var c=document.getElementById("myCanvas");
12
var ctx=c.getContext("2d");
13
// Draw a rectangle
14
ctx.rect(50,20,200,120);
15
ctx.stroke();
16
// Draw red rectangle
17
ctx.fillStyle="green";
18
ctx.fillRect(0,0,150,100);
19
</script> 
20
21
<br />
22
23
<p>使用 clip():</p>
24
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
25
Your browser does not support the HTML5 canvas tag.
26
</canvas>
27
28
<script>
29
var c=document.getElementById("myCanvas2");
30
var ctx=c.getContext("2d");
31
// Clip a rectangular area
32
ctx.rect(50,20,200,120);
33
ctx.stroke();
34
ctx.clip();
35
// Draw red rectangle after clip()
36
ctx.fillStyle="green";
37
ctx.fillRect(0,0,150,100);
38
</script> 
39
40
</body>
41
</html>
42