绘制基本图形

绘制矩形

绘制矩形有三个基本function分别是fill、stroke、clear

// 填充矩形
fillRect(x, y, width, height);
// 右边框的矩形
strokeRect(x, y, width, height);
// 清空一片矩形区域使其透明
clearRect(x, y, width, height);

看代码

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

看效果

1.注意以上三个函数绘制之后会马上显示在canvas上，按我的理解也就是每一个都需要单独占用一个帧绘制的时间，是非常消耗性能的

2.既然有了绘制矩形那么绘制一个独立的像素点也就有了，看代码

// 绘制一个像素点，怎么样，够简单粗暴吗，但由于第一点的原因，显然在实际生产中不能这样使用
fillRect(x, y, 1, 1);

绘制路径

图形的基本元素是路径，路径是线段或曲线相连形成的点的集合 绘制路径有四个function，看代码

// 新建一条路径
beginPath();
// 闭合一条路径
closePath();
// 绘制一条路径
stroke();
// 填充一个闭合路径(未闭合的则强行首尾连接)
fill();

但是我的线呢，说好的线呢？黑人问号？别急先来掌握一点概念

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。说人话就是画线需要动笔。

第二步就是调用函数指定绘制路径

// 将笔触移动到指定的坐标x以及y上
moveTo(x, y);
//绘制一条从当前位置到指定x以及y位置的直线
lineTo(x, y);

第三，就是闭合路径closePath()不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做

closePath()：合着我就是来打酱油的?

TIP

注意：当你调用 fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath()函数。但是调用 stroke()时不会自动闭合。

Demo 绘制三角形

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

渲染效果

绘制圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise);

绘制一个圆，其圆心为(x, y )，半径为 radius，从 startAngle 到 endAngle，按照anticlockwise给定的方向来生成，默认为顺时针false，使用角度来控制圆弧

arcTo(x1, y1, x2, y2, radius);

根据给定的控制点和半径，话一段圆弧，再以直线连接两个控制点

绘制笑脸

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
ctx.stroke();