Home > Article > Web Front-end > Detailed introduction to the drawImage() method of HTML5 Canvas drawing (code example)
Detailed introduction to the drawImage() method of HTML5 Canvas drawing (code example)
- 不言forward
- 2019-03-14 11:28:175846browse
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.
Red maple leaf
1
Follow the author
Posted 52 minutes ago
## 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
0
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!