使用HTML中的canvas绘制图形

*以下为笔记

一、什么是canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二、如何使用canvas

1、建立一个canvas实例

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

效果：

2、使用JavaScript绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

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

// 例1
context.beginPath();

三、Canvas的几个参数

1、Canvas坐标

canvas 是一个二维网格
canvas 的左上角坐标为 (0,0)

2、Canvas路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y)定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke()

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

在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop,counterclockwise)
x：x坐标
y：y坐标
r：半径
start：起始角度，弧度制
stop：结束角度，弧度制
counterclockwise:可选，顺时针或者逆时针 False = 顺时针，true = 逆时针

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

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

3、Canvas文本

使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

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

4、图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)
我最开始是这样写的

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);

然后我发现，这样写并不能显示出图像
查阅网上资料后了解到

在canvas中插入图片，必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。
如果试图在图片未完全加载之前就将其呈现到canvas上，将不会显示任何图片。

所以修改之后的代码是：

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);
}

效果：

*参考于菜鸟教程
https://www.runoob.com/html/html5-canvas.html
https://www.runoob.com/tags/ref-canvas.html

三、我画的花里胡哨的图案

 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);

效果：