canvas 绘制图像

 

 

结果：

 

代码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    canvas {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>绘制图像</h3>
  <canvas id="c17" width="500" height="400"></canvas>
  <script>
    var ctx = c17.getContext('2d');
    //下述代码的执行结果输出是： 1 、 3 、 2
    var img = new Image();
    img.src = 'img/p4.png';
    console.log(1, img.width,   img.height);
    img.onload = function(){
      console.log('2 图片加载完成')
      console.log(img.width,   img.height);
      ctx.drawImage(img, 0, 0);
      ctx.drawImage(img, 500-img.width, 0);
    }
    console.log('3 JS执行完成')
  </script>
</body>
</html>

 

posted @ 2017-05-26 00:38  快乐的咸鱼  阅读(148)  评论(0)  编辑  收藏  举报