如何在 HTML5 Canvas 中使用图像?

HTML5 的 <canvas> 标签用于通过脚本绘制图形、动画等。它是 HTML5 中引入的新标签。要在 HTML5 Canvas 中使用图像，请使用 drawImage() 方法。此方法将给定的图像绘制到画布上。

您可以尝试运行以下代码来学习如何在 HTML Canvas 中使用图像。其中，图像是对图像或画布对象的引用。x 和 y 构成了目标画布上图像应放置的坐标。

示例

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         function drawShape() {
            // 使用 DOM 获取 Canvas 元素
            var canvas = document.getElementById('mycanvas');

            // 确保在 Canvas 不受支持时不会执行此操作
            if (canvas.getContext) {

               // 使用 getContext 来使用画布进行绘制
             var ctx = canvas.getContext('2d');

               // 绘制形状
               var img = new Image();
               img.src = '/images/backdrop.jpg';
               img.onload = function() {
                  ctx.drawImage(img,0,0);
                  ctx.beginPath();
                  ctx.moveTo(30,96);
                  ctx.lineTo(70,66);
                  ctx.lineTo(103,76);
                  ctx.lineTo(170,15);
                  ctx.stroke();
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/