Canvas drawing pictures

Time:2020-3-30

We have learned some basic methods of using canvas. In canvas, we can draw pictures directly. In canvas, we mainly use DrawImage method to draw pictures

1: There are three cases of DrawImage method parameters

1: Three parameters

ctx.drawImage(image,dx,dy)

Image: IMG image to be drawn

DX, Dy: the coordinates of the drawn img image in canvas (x, y)

2: Five parameters

ctx.drawImage(image,dx,dy,dw,dh) 

Image: IMG image to be drawn

DX, Dy: the coordinates of the drawn img image in canvas (x, y)

DW, DH: the size (W, H) width and height of the drawn img image in canvas

3: 9 parameters (used for slicing), which means that the image is cropped specifically and then placed in the specified position

ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh) 

Image: IMG image to be drawn

SX, sy, SW, SH: define slice position and size of image source

DX, Dy, DW, DH: define the target display position and size of slice

2: There are two ways to draw a picture in canvas

1: There are ready-made img pictures. Draw the pictures in img tags into canvas

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    Return 'does not support canvas'  
}  
var ctx=canvas.getContext("2d")  
//Create picture  
var img = document.querySelector("img");  
//Draw picture  
ctx.drawImage(img, 0, 0)

2: Create a picture from scratch

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    Return 'does not support canvas'  
}  
var ctx=canvas.getContext("2d")  
//Create picture  
Var img = new image(); // create an < img > element  
img.onload = function(){  
    Ctx.drawimage (IMG, 0, 0) // draw a picture  
}  
Img. SRC ='wj. JPG '; // set image source address

3: According to the above three situations of DrawImage parameter, let’s implement them separately to see the effect

1: Ctx.drawimage (image, DX, Dy): draw the original image into canvas

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    Return 'does not support canvas'  
}  
var ctx=canvas.getContext("2d")  
//Create picture  
Var img = new image(); // create an < img > element  
img.onload = function(){  
    Ctx.drawimage (IMG, 0, 0) // draw a picture  
}  
Img. SRC ='wj. JPG '; // set image source address

Canvas drawing pictures

2: Ctx.drawimage (image, DX, Dy, DW, DH): set the size of the picture and draw it into canvas

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    Return 'does not support canvas'  
}  
var ctx=canvas.getContext("2d")  
//Create picture  
Var img = new image(); // create an < img > element  
img.onload = function(){  
    Ctx.drawimage (IMG, 0, 0, 50, 50) // draw a picture  
}  
Img. SRC ='wj. JPG '; // set image source address

Canvas drawing pictures

3: Ctx.drawimage (image, SX, sy, SW, SH, DX, Dy, DW, DH): slice, cut the picture specifically, and then put it in the specified position

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    Return 'does not support canvas'  
}  
var ctx=canvas.getContext("2d")  
//Create picture  
Var img = new image(); // create an < img > element  
img.onload = function(){  
    ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 250)  
}  
Img. SRC ='wj. JPG '; // set image source address

Canvas drawing pictures

Recommended Today

Construction and experiment of Kafka, ZK cluster development or deployment environment

This article is original, reprint and indicate the source, welcome to pay attention to wechat appletXiaobai AI blogWeChat official accountXiaobai AIOr website https://xiaobaiai.net Or my CSDN http://blog.csdn.net/freeape [TOC] 1 foreword Other features of Kafka will not be discussed here. This article is mainly about the construction of cluster development environment. For details of Kafka’s relevant […]