Canvas绘制图片示例

by 亮 薛

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Canvas绘制图片示例</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300"></canvas>

  <script>
    // 获取 Canvas 元素和 2D 上下文
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // 创建图片对象
    var img = new Image();

    // 图片加载完成后进行绘制
    img.onload = function() {
      // 清空 Canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制图片
      context.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

    // 设置图片路径
    img.src = 'https://cdnjs.xueliang.org/ajax/libs/jstree/3.3.3/themes/default/32px.png';
  </script>
</body>
</html>