Canvas引用缩放图像【每日一段代码14】
2012-02-09 21:12
435 查看
<!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>
显示效果如下:
![](http://pic002.cnblogs.com/images/2012/368019/2012020921073148.jpg)
【drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。实例中用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单,只需要循环铺开经过缩放的图片即可。第一层 for 循环是做行重复,第二层是做列重复的。图像大小被缩放至原来的三分之一。这种方法可以用来很好的达到背景图案的效果。】
<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>
显示效果如下:
![](http://pic002.cnblogs.com/images/2012/368019/2012020921073148.jpg)
【drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。实例中用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单,只需要循环铺开经过缩放的图片即可。第一层 for 循环是做行重复,第二层是做列重复的。图像大小被缩放至原来的三分之一。这种方法可以用来很好的达到背景图案的效果。】
相关文章推荐
- Canvas引用图像【每日一段代码13】
- Canvas绘制路径【每日一段代码8】
- HTML5 Canvas 绘制树 【每日一段代码38】
- Canvas 状态的保存和恢复实例【每日一段代码25】
- HTML5 Canvas 矩形【每日一段代码5】
- Canvas绘制三角形路径【每日一段代码9】
- Canvas绘制弧形【每日一段代码10】
- Canvas绘制矩形的三个函数【每日一段代码7】
- Canvas运用样式与颜色fillStyle【每日一段代码15】
- Canvas绘制路径:二次方曲线【每日一段代码11】
- HTML5 Canvas透明【每日一段代码33】
- HTML5 Canvas 绘制齿轮【每日一段代码34】
- HTML5 Canvas 画圆【每日一段代码4】
- canvas 线性渐变填充【每日一段代码62】
- Canvas绘制重叠矩形【每日一段代码6】
- Canvas lineJoin 属性【每日一段代码20】
- JavaScript 图像映射 【每日一段代码71】
- Canvas lineWidth 属性 【每日一段代码18】
- Canvas createRadialGradient 线性渐变【每日一段代码22】
- Canvas运用样式与颜色strokeStyle【每日一段代码16】