<!DOCTYPE HTML>
<html>
<head>
<title>tupian</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.src = "C:/Users/Administrator/Desktop/666.jpg";
img.onload = function(){
for (i=0; i<4; i++)
{
for (j=0; j<3; j++)
{
cxt.drawImage(img,j*50,i*38,50,38);
}
}
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas"></canvas>
</body>
</html>
显示效果如下：
【drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。实例中用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一。这种方法可以用来很好的达到背景图案的效果。】