Detailed introduction to the drawImage() method of HTML5 Canvas drawing (code example)

This article brings you a detailed introduction (code example) about the drawImage() method of HTML5 Canvas drawing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

is a new HTML element that can be used by Script language (usually JavaScript) to draw graphics. For example, you can use it to draw pictures, composite images, or do simple (and not so simple) animations.

1. The most common way to draw on canvas is to use the Image object. The supported source image formats depend on browser support. However, some typical image formats (png, jpg, gif, etc.) are basically no problem.
2. In all the examples below, the image source will use this 200×200 size image.

#3. Draw a picture: In the most basic drawing operation, all you need is the position (x and y coordinates) where you want the image to appear. The image's position is judged relative to its upper left corner. Using this method, the image can simply be drawn on the canvas at its original size.
4. The code is as follows:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. Image deformation: To change the size of the image, you need to use the overloaded drawImage function and provide it with the desired width and height parameters.
6. The code is as follows:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. Image cropping: The function of the drawImage method is to crop the image. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8. There are many parameters, but basically you can think of it as taking a rectangular area from the original image and drawing it to the target area on the canvas.
9. The code is as follows:
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. These are the basics of drawing and processing images in the canvas tag in HTML5 operate.

1. Column
2. Article details

##                                                                     

Red maple leaf                                                                                          1                                                                                                                                                                                                                                                                                                     Follow the author                                                                                        Posted 52 minutes ago

HTML5 Canvas Drawing DrawImage () Method

## javascript

## Html5

16 times read                                                             It takes 5 minutes to read                                                                                                                                                                                                                                                                                                    

                                                                                                       

                                                                                                                                                                                                                                                                                                                                                                                                       Introduction is a new HTML element that can be used by Script language (usually JavaScript) to draw graphics. For example, you can use it to draw pictures, composite images, or do simple (and not so simple) animations. 1. The most common way to draw on canvas is to use the Image object. The supported source image formats depend on browser support. However, some typical image formats (png, jpg, gif, etc.) are basically no problem. 2. In all the examples below, the image source will use this 200×200 size image.




#3. Draw a picture: In the most basic drawing operation, all you need is the position (x and y coordinates) where you want the image to appear. The image's position is judged relative to its upper left corner. Using this method, the image can simply be drawn on the canvas at its original size.
4. The code is as follows:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. Image deformation: To change the size of the image, you need to use the overloaded drawImage function and provide it with the desired width and height parameters.
6. The code is as follows:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. Image cropping: The function of the drawImage method is to crop the image. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight) 8. There are many parameters, but basically you can think of it as taking a rectangular area from the original image and drawing it to the target area on the canvas. 9. The code is as follows: var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. These are the basics of drawing and processing images in the canvas tag in HTML5 operate.

report

• 
• ##Like

|

                                                                                         

Collection

|

0

You may be interestedComment                                                                                                     

Сортировка по умолчанию Сортировать по времени

##Загрузка...

Показать больше комментариев

##Оставить комментарий

The above is the detailed content of Detailed introduction to the drawImage() method of HTML5 Canvas drawing (code example). For more information, please follow other related articles on the PHP Chinese website!