Home > Article > Web Front-end > How to draw images in HTML5 canvas

How to draw images in HTML5 canvas

不言Original: 2018-12-01 17:30:154609browse

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>

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();

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;;

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>

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!

html5 html 对象事件异步 canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use HTML5 canvas to implement image mosaicNext article：How to use HTML5 canvas to implement image mosaic

See more

How to draw images in HTML5 canvas

Related articles