rect of Canvas learning record

Latest update time: 14:29:22, March 14, 2020

"Jab - check my blog map - there will always be surprises for you"

This paper introduces some basic usage of drawing rectangle path based on rect(), such as rectangle, square, rounded rectangle, linear gradient rectangle, radiation gradient circle

rect

Draw a rectangle. The four input parameters are: starting point x-axis coordinate (starting point is the upper left corner of the rectangle), starting point y-axis coordinate, width and height
The origin coordinate (0,0) of canvas is the upper left corner

ctx.rect(x, y, width, height);

Draw a rectangular path

ctx.rect(10, 10, 100, 50);
ctx.lineWidth =1;
ctx.strokeStyle = '#000';
ctx.stroke();

Draw a square path

ctx.rect(10, 10, 100, 100);
ctx.lineWidth =1;
ctx.strokeStyle = '#000';
ctx.stroke();

Draw a filled rectangle

ctx.rect(10, 10, 100, 50);
ctx.fillStyle = '#7FFFAA';
ctx.fill();

clearRect(x, y, width, height);

Erases everything painted before the canvas with a rectangle, making pixels transparent
The four input parameters are: the x-axis coordinate of the starting point of the rectangle, the y-axis coordinate of the starting point of the rectangle, the width of the rectangle, and the height of the rectangle.

ctx.fillStyle = '#7FFFAA';
ctx.fillRect(10, 10, 100, 50);
ctx.clearRect(0,0,60,35);

fillet

Draw a rounded rectangle

Canvas origin coordinate (0,0), rectangle upper left corner coordinate (10,10), width 100, height 50, fillet radius 5

//Rectangle starting coordinate (10,10)
let x =10;
let y = 10;
//Fillet radius 5
let r = 5;
//Rectangle width height
let w = 100;
let h = 50;
//Start new path
ctx.beginPath();
//Top left corner fillet
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
//Rectangle top edge
ctx.lineTo(x+w-r, y);
//Top right corner fillet
ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
//Rectangle right line
ctx.lineTo(x+w, y+h-r);
//Lower right corner fillet
ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
//Rectangle bottom line
ctx.lineTo(x+r, y+h);
//Lower left corner fillet
ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
//Rectangle left line
ctx.lineTo(x, y+r);//The last boundary can be drawn with ctx.closePath()
//line width
ctx.lineWidth = 1;
//Line color value
ctx.strokeStyle = '#000';
//Draw line
ctx.stroke();

Draw a filled rectangle

Canvas origin coordinate (0,0), rectangle upper left corner coordinate (10,10), width 100, height 50, fillet radius 5

//Rectangle starting coordinate (10,10)
let x =10;
let y = 10;
//Fillet radius 5
let r = 5;
//Rectangle width height
let w = 100;
let h = 50;
//Start new path
ctx.beginPath();
//Top left corner fillet
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
//Rectangle top edge
ctx.lineTo(x+w-r, y);
//Top right corner fillet
ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
//Rectangle right line
ctx.lineTo(x+w, y+h-r);
//Lower right corner fillet
ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
//Rectangle bottom line
ctx.lineTo(x+r, y+h);
//Lower left corner fillet
ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
//Rectangle left line
ctx.lineTo(x, y+r);//The last boundary can be drawn with ctx.closePath()
//Fill color
ctx.fillStyle = '#7FFFAA';
//Fill
ctx.fill();

Gradual change

createLinearGradient(x0, y0, x1, y1)

Linear gradient, method to create a gradient along the line specified by the parameter coordinates. This method returns a linear canvas gradient object
The four input parameters are: starting point x-axis coordinate, starting point y-axis coordinate, ending point x-axis coordinate and ending point y-axis coordinate

x-axis horizontal gradient fill rectangle

var gradient = ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,"#000");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,100,50);

y direction vertical direction gradient fill rectangle

var gradient = ctx.createLinearGradient(0,0,0,50);
gradient.addColorStop(0,"#000");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,100,50);

Diagonal direction (top left to bottom right) gradient fill rectangle

var gradient = ctx.createLinearGradient(0,0,100,100);
gradient.addColorStop(0,"#000");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,100,100);

createRadialGradient(x0, y0, r0, x1, y1, r1)

Radioactive gradients, determine the coordinates of two circles according to the parameters, and draw the method of radioactive gradients
The six input parameters are: the x-axis coordinate of the start circle, the y-axis coordinate of the start circle, the radius of the start circle, the x-axis coordinate of the end circle, the y-axis coordinate of the end circle, and the radius of the end circle.

Tricolor radiation gradient fill circle

var gradient = ctx.createRadialGradient(50,50,50,50,50,0);
gradient.addColorStop(0,"#000");
gradient.addColorStop(0.5,"#7FFFAA");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.arc(50,50,50,0,Math.PI*2);
ctx.fill();