H5 canvas drawing circle drawing fillet [detailed explanation]

canvas yes H5 A big point of
Let's learn how to use canvas A circle

A circle

arc(x,y,r, Initial radian , End arc , Clockwise and counterclockwise )

• x,y Is the coordinates of the center of the circle
• r It's the radius of the circle
• Radian unit is Math.PI
• Clockwise and counterclockwise 0( Clockwise ) 1( Anti-clockwise )

const cas = document.getElementsByTagName('canvas')[0];
const ctx = cas.getContext("2d");

ctx.arc(250,250,100,0,Math.PI / 2,1);
ctx.stroke();

The starting point and the ending point are the same , But it is different to draw it clockwise and anticlockwise

const cas = document.getElementsByTagName('canvas')[0];
const ctx = cas.getContext("2d");

ctx.arc(250,250,100,0,Math.PI / 2,0);
ctx.stroke();

The circle above , Let's change direction , Clockwise

Draw round corners

Let's first understand a canvas The drawing method of round corner in .
We need to know 3 A little bit

arcTo(bx,by,cx,cy, Fillet size )

Let me explain the size of the fillet ： Is the radius of the circle of the tangent angle .

If you understand the picture above , So let me draw a rounded rectangle , See if you really understand

var can = document.getElementsByTagName('canvas')[0];
var ctx = can.getContext('2d');

ctx.moveTo(100,110); //  Why not 100 100
//  You can change it to 100, See what happens 
ctx.arcTo(100,200,105,200,10);

ctx.arcTo(200,200,200,199,10);
ctx.arcTo(200,100,199,100,10);
ctx.arcTo(100,100,100,105,10);
ctx.stroke();