案例：html/html5 案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<body>
4
​
5
<p>要用到的图片：</p>
6
<img src="/img/lamp.gif" id="lamp" />
7
<p>Canvas:</p>
8
​
9
<button onclick="draw('repeat')">Repeat</button>
10
<button onclick="draw('repeat-x')">Repeat-x</button>
11
<button onclick="draw('repeat-y')">Repeat-y</button>
12
<button onclick="draw('no-repeat')">No-repeat</button>
13
​
14
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
15
Your browser does not support the HTML5 canvas tag.</canvas>
16
​
17
<script type="text/javascript">
18
function draw(direction)
19
{
20
var c=document.getElementById("myCanvas");
21
var ctx=c.getContext("2d");
22
ctx.clearRect(0,0,c.width,c.height);
23
var img=document.getElementById("lamp")
24
var pat=ctx.createPattern(img,direction);
25
ctx.rect(0,0,150,100);
26
ctx.fillStyle=pat;
27
ctx.fill();
28
}
29
</script>
30
​
31
</body>
32
</html>
33
​