Html uses Canvas to draw graphics

Today I received a private message from a fan asking if it is possible to draw some graphics through Canvas, and then simulate the drawing through Canvas according to the template provided by the fan. Through analysis, I found that although the graphics are relatively simple, if you do not use the corresponding software, pure code drawing still takes a little time. Today, I will share the source code of drawing graphics for learning and sharing purposes only. If there are any deficiencies, please correct me.

What is Canvas?

Canvas represents a graphics container (called a canvas) that can be drawn using scripts.

Canvas coordinates

canvas is a two-dimensional grid. The coordinates of the upper left corner of the canvas are (0,0). As shown in the image below, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular frame where the mouse moves.

Canvas interface

Canvas provides simple graphics drawing functions by default, such as straight lines, rectangles, arcs, Bezier curves, etc. Simple graphics can be drawn through the interface, and complex graphics need to be realized through different combinations of simple graphics.

For details, please refer to: https://www.w3school.com.cn/jsref/dom_obj_canvas.asp

Demand original picture

First of all, look at the original picture sent by fans. The graphics in the red box are relatively complicated, as shown below:

Canvas drawing

Draw the corresponding graphics through Canvas, the effect is as follows:

Canvas drawing source code

First create a Canvas drawing container, and create it through the canvas tag. Each graph is created with a container, independent of each other, as follows:

<canvas id="bigHeadCanvas" width="150" height="150"></canvas>
<canvas id="circleCanvas" width="150" height="150"></canvas>
<canvas id="fishCanvas" width="150" height="150"></canvas>
<canvas id="heartCanvas" width="150" height="150"></canvas>
<canvas id="pandaCanvas" width="150" height="150"></canvas>
<canvas id="sunFlowerCanvas" width="150" height="150"></canvas>
<canvas id="fiveStarCanvas" width="150" height="150"></canvas>
<canvas id="catCanvas" width="150" height="150"></canvas>
<canvas id="foxCanvas" width="150" height="150"></canvas>
<canvas id="appleCanvas" width="150" height="150"></canvas>
<canvas id="rectCanvas" width="150" height="150"></canvas>
<canvas id="sixCanvas" width="150" height="150"></canvas>
<canvas id="diamondCanvas" width="150" height="150"></canvas>
<canvas id="circleRectCanvas" width="150" height="150"></canvas>
<canvas id="eggCanvas" width="150" height="150"></canvas>

1. Draw Big Bear

To draw a big bear, the code is as follows:

function drawBigHead(){
	var c = document.getElementById("bigHeadCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(50,50,50,Math.PI*1.85,Math.PI*1.15);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(50,50,45,Math.PI*1.35,Math.PI*1.68);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(17,17,15,Math.PI*0.7,Math.PI*1.8);//左耳
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(87,17,15,Math.PI*1.15,Math.PI*0.3);//右耳
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('大头熊形',30,130);
}

Note: The first two sentences are to create the Canvas context object, first get the canvas control, then create the object, and then use the object to create graphics.

2. Draw the circle

Draw a circular pattern as follows:

function drawCircle(){
	var c = document.getElementById("circleCanvas");
	var ctx = c.getContext("2d");
 
	ctx.arc(55,55,50,Math.PI*0,Math.PI*2);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('圆形',35,130);
}

3. Draw the fish shape

Draw the fish shape as follows:

function drawFish(){
	var c = document.getElementById("fishCanvas");
	var ctx = c.getContext("2d");
	
	ctx.beginPath();
	ctx.arc(56,52,52,Math.PI*0.75,Math.PI*1.44);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(32,52,52,Math.PI*1.57,Math.PI*0.25);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(42,135,32,Math.PI*1.30,Math.PI*1.70);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(17,105,8,Math.PI*0.15,Math.PI*1.3);
	ctx.lineTo(20,88);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(67,105,8,Math.PI*0.88,Math.PI*1.75,true);
	ctx.lineTo(70,88);
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('鱼形',28,130);
}

4. Draw the heart shape

Draw the heart pattern as follows:

function drawHeart(){
	var c = document.getElementById("heartCanvas");
	var ctx = c.getContext("2d");
	ctx.arc(36,26,20,Math.PI*0.75,Math.PI*1.75);
	ctx.lineTo(60,25);
	ctx.lineTo(70,10);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(83,26,20,Math.PI*1.25,Math.PI*0.25);
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(21,40);
	ctx.lineTo(60,90);
	ctx.lineTo(98,40);
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('心形',45,130);
}

5. Draw the big bear shape

To draw a big bear shape, the code is as follows:

function drawPanda(){
	var c = document.getElementById("pandaCanvas");
	var ctx = c.getContext("2d");
	//上
	ctx.arc(18,15,15,Math.PI*0.75,Math.PI*1.85);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(80,15,15,Math.PI*1.13,Math.PI*0.20);
	ctx.lineTo(88,39);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(48,75,70,Math.PI*1.42,Math.PI*1.59);
	ctx.stroke();
	
	//中
	ctx.beginPath();
	ctx.arc(30,55,28,Math.PI*0.75,Math.PI*1.25);
	ctx.lineTo(6,23);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(66,55,28,Math.PI*1.78,Math.PI*0.25);
	ctx.lineTo(80,88);
	ctx.stroke();
 
	//下
	ctx.beginPath();
	ctx.arc(25,93,12,Math.PI*0.27,Math.PI*1.20);
	ctx.lineTo(10,74);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(70,93,12,Math.PI*1.83,Math.PI*0.73);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(47,135,35,Math.PI*1.35,Math.PI*1.65);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('大熊形',33,130);
}

6. Drawing the Sunflower

To draw sunflowers, the code is as follows:

function drawSunFlower(){
	var c = document.getElementById("sunFlowerCanvas");
	var ctx = c.getContext("2d");
	var startX=2;
	var startY=2;
	var radius=15;
	
	//上
	ctx.beginPath();
	ctx.arc(startX+4*radius,startY+1.5*radius,radius,Math.PI*1,Math.PI*0);
	ctx.stroke();
	//下
	ctx.beginPath();
	ctx.arc(startX+4*radius,startY+6.3*radius,radius,Math.PI*0,Math.PI*1);
	ctx.stroke();
	//左
	ctx.beginPath();
	ctx.arc(startX+1.5*radius,startY+4.0*radius,radius,Math.PI*0.4,Math.PI*1.6);
	ctx.stroke();
	//右
	ctx.beginPath();
	ctx.arc(startX+6.2*radius,startY+4*radius,radius,Math.PI*0.5,Math.PI*1.5,true);
	ctx.stroke();
	//上右
	ctx.beginPath();
	ctx.arc(startX+5.7*radius,startY+2.1*radius,radius,Math.PI*1.20,Math.PI*0.40);
	ctx.stroke();
 
	//上左
	ctx.beginPath();
	ctx.arc(startX+2.0*radius,startY+2.0*radius,radius,Math.PI*1.9,Math.PI*0.60,true);
	ctx.stroke();
 
	//下左
	ctx.beginPath();
	ctx.arc(startX+2.0*radius,startY+6.0*radius,radius,Math.PI*0,Math.PI*1.38);
	ctx.stroke();
 
	//下右
	ctx.beginPath();
	ctx.arc(startX+5.8*radius,startY+5.8*radius,radius,Math.PI*0.78,Math.PI*1.58,true);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('太阳花形',35,130);
}

7. Draw a five-pointed star

Draw a pentagram as follows:

function drawFiveStar(){
	var c = document.getElementById("fiveStarCanvas");
	var ctx = c.getContext("2d");
	ctx.moveTo(30,20);
	ctx.beginPath();
	ctx.lineTo(50,0);//顶
	ctx.lineTo(70,20);
	ctx.lineTo(100,30);
	ctx.lineTo(85,60);
	ctx.lineTo(80,90);
	ctx.lineTo(50,80);//底
	ctx.lineTo(20,90);
	ctx.lineTo(15,60);
	ctx.lineTo(0,30);
	ctx.lineTo(30,20);
	ctx.closePath();
	ctx.stroke();
	ctx.font="12px Airal";
	ctx.strokeText('五角星',33,130);
}

8. Draw the cat head

Draw the cat head shape, the code is as follows:

function drawCat(){
	var c = document.getElementById("catCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(60,75,60,Math.PI*1.42,Math.PI*1.58);//顶
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(60,55,50,Math.PI*0.64,Math.PI*1.2);//左下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(55,55,50,Math.PI*1.82,Math.PI*0.38);//右下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(55,140,45,Math.PI*1.35,Math.PI*1.65);//下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(65,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(10,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(115,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(55,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('猫咪头形',33,130);
}

9. Draw the Fox Head

Draw the shape of the fox head, the code is as follows:

function drawFox(){
	var c = document.getElementById("foxCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(60,75,60,Math.PI*1.45,Math.PI*1.55);//顶
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(70,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(15,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(110,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(50,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
	ctx.stroke();
 
	ctx.beginPath();
	ctx.arc(60,50,40,Math.PI*0.4,Math.PI*0.6); //底部
	ctx.lineTo(45,80); //左脸
	ctx.lineTo(2,50);
	ctx.lineTo(26,27);
	ctx.stroke();
 
	ctx.beginPath();
	ctx.moveTo(92,30);//右脸
	ctx.lineTo(115,50);
	ctx.lineTo(75,80);
	ctx.lineTo(70,90);
	ctx.stroke();
 
	ctx.font="12px Airal";
	ctx.strokeText('狐狸头形',33,130);
}

10. Drawing the Apple

To draw an apple shape, the code is as follows:

function drawApple(){
	var c = document.getElementById("appleCanvas");
	var ctx = c.getContext("2d");
 
	var img = new Image();
	img.width=100;
	img.height=100;
	img.src="apple.png";
	var id=setTimeout(function(){
		//console.log("超时执行");
		if(img.complete){
			ctx.drawImage(img, 10, 10,100,100);
			clearTimeout(id);
		}
	},100);
	
	ctx.font="12px Airal";
	ctx.strokeText('苹果形',35,130);
}

Note that Canvas can not only draw graphics, but also add image elements. Since the apple graphics are relatively complex, it is drawn by drawing an Image object.

11. Draw the rectangle

To draw a rectangle, the code is as follows:

function drawRect(){
    var c = document.getElementById("rectCanvas");
    var ctx = c.getContext("2d");
 
    ctx.rect(10,10,100,80);
    ctx.stroke();
 
    ctx.font="12px Airal";
    ctx.strokeText('圆形',35,130);
}

12. Draw the hexagon

Draw the hexagon as follows:

function drawSix(){
    var c = document.getElementById("sixCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    var centerX=50;
    var centerY=50;
    var radius=50;
    ctx.moveTo(centerX+radius*Math.cos(Math.PI*0),centerY+radius*Math.sin(Math.PI*0));
    for(var i=0;i<5;i++){
        ctx.lineTo(centerX+radius*Math.cos(Math.PI*(i+1)*(1/3)),centerY+radius*Math.sin(Math.PI*(i+1)*(1/3)));
    }
    ctx.closePath();
    ctx.stroke();
 
    ctx.font="12px Airal";
    ctx.strokeText('六边形',35,130);
}

Note: The hexagon is equivalent to dividing the circle into six equal parts, and taking six vertices for connection, so the for loop is used for drawing here.

13. Drawing Diamonds

Draw a diamond shape as follows:

function drawDiamond(){
    var c = document.getElementById("diamondCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,5);
    ctx.lineTo(90,5);
    ctx.lineTo(110,35);
    ctx.lineTo(55,100);
    ctx.lineTo(0,35);
    ctx.closePath();
    ctx.stroke();
    ctx.font="12px Airal";
    ctx.strokeText('钻石形',33,130);
 
}

14. Draw side angle bars

To draw a long bar with side angles, the code is as follows:

function drawCircleRect(){
    var c = document.getElementById("circleRectCanvas");
    var ctx = c.getContext("2d");
    var centerX=20;
    var centerY=5;
    ctx.beginPath();
    ctx.moveTo(centerX+ 15,centerY+ 5);
    ctx.lineTo(centerX+60,centerY+ 5);
    ctx.lineTo(centerX+60,centerY+ 80);
    ctx.arc(centerX+50,centerY+ 80,10,Math.PI*0,Math.PI*0.5);
    ctx.lineTo(centerX+5,centerY+ 90);
    ctx.lineTo(centerX+5,centerY+ 15)
    ctx.arc(centerX+15,centerY+ 15,10,Math.PI*1,Math.PI*1.5);
    ctx.closePath();
    ctx.stroke();
    ctx.font="12px Airal";
    ctx.strokeText('侧角长条形',30,130);
}

15. Drawing the eggs

Draw the egg shape as follows:

function drawEgg(){
    var c = document.getElementById("eggCanvas");
    var ctx = c.getContext("2d");
 
    ctx.rotate(10*Math.PI/180);
    var centerX=40;
    var centerY=2;
    ctx.beginPath();
    ctx.arc(centerX+30,centerY+ 60,30,Math.PI*0,Math.PI*1);
    ctx.lineTo(centerX+15,centerY+ 25);
    ctx.arc(centerX+35,centerY+ 25,20,Math.PI*1,Math.PI*0);
    ctx.lineTo(centerX+60,centerY+ 60);
    ctx.closePath();
    ctx.stroke();
    ctx.rotate(-10*Math.PI/180);
    ctx.font="12px Airal";
    ctx.strokeText('鸡蛋形',30,130);
}

Note: Because the egg shape is a bit skewed, it was drawn with a rotation.

The above is the whole content of using Canvas to draw graphics in Html.