zoukankan      html  css  js  c++  java
  • Canvas引用缩放图像【每日一段代码14】

    <!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 循环是做行重复,第二层是做列重复的。图像大小被缩放至原来的三分之一。这种方法可以用来很好的达到背景图案的效果。】

  • 相关阅读:
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    iOS开发系列--IOS程序开发概览
    iOS开发系列—Objective-C之Foundation框架
  • 原文地址:https://www.cnblogs.com/naokr/p/2344512.html
Copyright © 2011-2022 走看看