Use canvas to draw graphics in HTML

* The following is the note

First, what is the canvas

HTML5 <canvas> element is used to draw graphics, done by a script (usually JavaScript).
<Canvas> tag is just a graphical container, you must use a script to draw graphics.

You can use the canvas by a variety of methods to draw paths, boxes, circles, characters, and adding images.

Second, how to use the canvas

1, the establishment of a canvas example

    <canvas id="myCanvas" width="200" height="100"
        style="border:1px solid #000000;">
    </canvas>

effect:

2, draw the image using JavaScript

The canvas element itself is not drawing power. All drawing work must be completed within JavaScript:

//通过getElementById找到<canvas>元素
var can = document.getElementById("myCanvas");
// 创建context对象
var ctx = can.getContext("2d");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
// 接下来就可以使用context对象来进行画图了

// 例1
context.beginPath();

Third, several parameters of the Canvas

1, Canvas coordinates

canvas is a two-dimensional grid
left corner of the canvas for the (0,0)

2, Canvas path

On Canvas painting line, we will use the following two methods:

moveTo(x,y)Defines a line start coordinates
lineTo(x,y)define a line ending coordinates
to draw lines that we have to use the "ink" methods, likestroke()

context.moveTo(0,120);
context.lineTo(0,180);
context.lineTo(110,150);
context.fill();//闭合形状而且以填充方式绘制出来

Draw a circle in the canvas, we will use the following methods:
arc(x,y,r,start,stop,counterclockwise)
X: X-coordinate
y: y-coordinate
r: radius
start: start angle in radians
stop: End angle, in radians
counterclockwise: Alternatively, clockwise or counterclockwise False = clockwise, true = anticlockwise

// 在300，400处，逆时针画一个半径为30，角度为0到270度的弧

context.arc(300, 400, 30, 0*Math.PI, 3/2*Math.PI,false);
context.stroke();

3, Canvas text

Use canvas to draw text, important properties and methods are as follows:
font- Custom Font
fillText(text,x,y)- the text to render solid on canvas
strokeText(text,x,y)- text rendering hollow on canvas

context.font="30px Arial";
context.fillText("Hello Edison", 30, 50);

4, image

An image is placed on the canvas, using the following method:

drawImage(image,x,y)
I started is written

var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
var context = can.getContext("2d");
context.drawImage(this, 0, 0);

Then I found out, write and do not show image
after access to online information learned

Insert pictures in the canvas, you must wait before they can be fully loaded operation after picture, while asynchronous browser would normally perform in the page script Load picture.
If you try to picture is not fully loaded before it will be presented to the canvas, will not display any picture.

So the code after modifications are:

var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
//待图片加载完后，将其显示在canvas上
imgObj.onload = function(){ //onload必须使用
    var context = can.getContext("2d");
    context.drawImage(this, 0, 0);
}

Effect:

* reference to the rookie tutorial
https://www.runoob.com/html/html5-canvas.html
https://www.runoob.com/tags/ref-canvas.html

Third, I painted fancy pattern

 var can = document.getElementById("myCanvas");
var context = can.getContext("2d");

// 熊的大脸
context.beginPath();
context.arc(300, 200, 90, 0*Math.PI, 2*Math.PI,false);
context.stroke();

// 左眼
context.beginPath();
context.arc(270, 180, 7, 0*Math.PI, 2*Math.PI,false);
context.fill();
// 右眼
context.beginPath();
context.arc(330, 180, 7, 0*Math.PI, 2*Math.PI,false);
context.fill();

// 嘴巴边缘
context.beginPath();
context.arc(300, 240, 35, 0, 2*Math.PI,true);
context.stroke();
// 鼻子
context.beginPath();
context.arc(300, 220, 8, 0, 2*Math.PI,true);
context.fill();
// 嘴巴
context.beginPath();
context.arc(300, 250, 10, Math.PI, 2*Math.PI,true);
context.fill();

// 右耳
context.beginPath();
context.arc(380, 135, 30, 1/2*Math.PI, 10/9*Math.PI,true);
context.stroke();

//左耳
context.beginPath();
context.arc(220, 135, 30, 1/2*Math.PI, 19/10*Math.PI,false);
context.stroke();

context.beginPath();

//右手
context.beginPath();
context.moveTo(460,260);//从点(160,160)開始
context.lineTo(470,320);
context.lineTo(540,310);
context.lineTo(560,270);
context.lineTo(490,240);
context.closePath();
context.stroke();

// 左手
context.beginPath();
context.moveTo(140,260);
context.lineTo(130,320);
context.lineTo(60,310);
context.lineTo(40,270);
context.lineTo(110,240);
context.closePath();
context.stroke();

// 身体
context.beginPath();
context.rect(200,330,200,300);
context.stroke();

// 左脚
context.beginPath();
context.arc(130, 700, 30, 0, 2*Math.PI,true);
context.stroke();
// 左脚内圆
context.beginPath();
context.arc(130, 700, 5, 0, 2*Math.PI,true);
context.stroke();

// 右脚
context.beginPath();
context.arc(470, 700, 30, 0, 2*Math.PI,true);
context.stroke();
// 右脚内圆
context.beginPath();
context.arc(470, 700, 5, 0, 2*Math.PI,true);
context.stroke();


// 图片摆放
var can = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "http://www.huangjihao.com/wp-content/uploads/2019/07/UNADJUSTEDNONRAW_mini_1.jpg";
imgObj.onload = function(){ //onload必须使用
    var context = can.getContext("2d");
    context.drawImage(this, 600, 400);
}
// 写上署名
context.font="20px Arial";
context.fillText("文字：hjh留下了名字", 600, 740);

effect: