如何在HTML5画布上使用图像？

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

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

示例

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

            //确保不支持画布时不执行
            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>

基础教程