How to draw images in HTML5 canvas-H5 Tutorial-php.cn

How to draw images in HTML5 canvas

不言

Release： 2018-12-01 17:30:15

Original

4686 people have browsed it

Canvas is a new canvas in HTML5, so how does HTML5 canvas draw images? This article will introduce to you the method of drawing images on HTML5 canvas. Let’s take a look at the specific content.

HTML5 canvas

Let’s look directly at the code example first

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      var img = new Image();
      img.onload = function onImageLoad() {
        context.drawImage(img, 128, 40);
      }
      img.src = &#39;img/flower.jpg&#39;;
    }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Copy after login

Description: When drawing on the canvas, obtaining the context of the canvas is a common process.

Prepare the image to be drawn on the canvas. Create an Image object.

  var img = new Image();

Copy after login

To draw an image on the canvas use the drawImage() method of the Canvas context. The X and Y coordinates are given to draw the Image object as the first argument and the image as the second third argument. Since loading the Image object's image is handled asynchronously, it must be ready after the Image object's image is ready. Draw the image. Therefore, we implement drawing processing on the onload event of the Image object, and finally process the settings of the source image

img.onload = function onImageLoad() {
    context.drawImage(img, 128, 40);
  }
  img.src = &#39;img/flower.jpg&#39;;

Copy after login

Running results

Open the HTML file in a Web browser. The result is shown below, the image is drawn on the canvas.

HTML5 canvas

Note: In the case of the following code, there is no guarantee that the image of the Image object will be read when drawImage is executed. So it might happen while displaying the image. Drawing images should be implemented on the onload of the Image object.

<script type="text/javascript">    
function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
              return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      
      var img = new Image();
      img.src = &#39;img/flower.jpg&#39;;
      context.drawImage(img, 128, 40);
    }
  </script>

Copy after login

The above is the detailed content of How to draw images in HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!