HTML5 Canvas Drawing Detailed drawImage () method There is a picture of the truth!

Steps

• 1
• 2
• 3
• 4
• 5

Brief introduction

is a new HTML element that can be used by the script language (usually JavaScript) to draw graphics. For example, it can be used to paint, synthesize images, or make simple (and not so simple) animations.

Tools/Materials

• Html

• Script

Steps/Methods

2. The most common way to paint on a canvas is to use an Image object. The supported source picture format relies on browser support, however, some typical picture formats (png,jpg,gif, etc.) are basically no problem.

4. In all the examples below, the image source will use this 256x256 size image.

6. To draw a picture: In the most basic drawing operation, all you need is the position where you want the image to appear (x and Y coordinates). The position of the image is judged relative to its upper-left corner. Using this method, the image can be simply drawn on the canvas with its original size.

7. The code is as follows

   var myimage=document.getelementbyidx_x ("MyCanvas");

   var Cxt=myimage.getcontext ("2d");

   var img=new Image ();

   Img.src= "Tu0.jpg";

   Cxt.drawimage (img,50,50);

   Cxt.drawimage (img,125,125);

   Cxt.drawimage (img,210,210);

9. Generate page effects based on the code you write

13. Picture morphing: Changing the size of the image, you need to use the overloaded DrawImage function to give it the desired width and height parameters.

14. The code is as follows

    var myimage=document.getelementbyidx_x ("MyCanvas");

    var Cxt=myimage.getcontext ("2d");

    var img=new Image ();

    Img.src= "Tu0.jpg";

    Cxt.drawimage (img,50,50,100,100);

    Cxt.drawimage (img,125,125,200,50);

    Cxt.drawimage (img,210,210,500,500);

16. This example shows how to draw an image that is smaller than the original, a different aspect ratio image, and a method that is larger than the original image.

18. Picture clipping: The function of the DrawImage method is to crop the image. DrawImage (Image,sourcex,sourcey,sourcewidth,sourceheight,destx,desty,destwidth, Destheight)

20. There are many parameters, but basically you can think of it as taking a rectangular area out of the original, and then drawing it to the target area on the canvas.

21. The code is as follows

    var myimage=document.getelementbyidx_x ("MyCanvas");

    var Cxt=myimage.getcontext ("2d");

    var img=new Image ();

    Img.src= "Tu0.jpg";

    Cxt.drawimage (img,0,0,50,50,25,25,100,100);

    Cxt.drawimage (img,125,125,100,100,125,125,150,150);

    Cxt.drawimage (img,80,80,100,100,250,250,220,220);

23. Generate page effects based on code

25. These are the basic operations for drawing and processing images in the canvas (canvas) markup in HTML5.

Precautions

HTML5 Canvas Drawing Detailed drawImage () method There is a picture of the truth!