Canvas 画布基本用法详解

Canvas 画布

HTML中的 <canvas> 标签用于动态绘制图形，所有在<canvas>中的画图必须用JavaScript完成。
<canvas>标签是透明的，它是图形的容器，必须使用脚本才能实际绘制图形。

绘制一个简单的矩形

<!-- canvas标签，必须具备id，width,height三个属性 -->
<canvas id="myCanvas" width="200" height="100">浏览器不支持Canvas</canvas>

如果当前浏览器不支持JavaScript和Canvas，会显示出Canvas标签内部的文本。

// 通过getElementById方法，在JS中找到对应的Canvas元素
const canvas = document.getElementById("myCanvas");
// getContext() 是一个内置的HTML对象，它提供了用于绘图的属性和方法
// 这里接收的参数是'2d'，说明这个canvas标签用于绘制平面图案，如果想要绘制立体图案，参数改为'webg1'即可
const ctx = canvas.getContext("2d");

通过ctx对象在画布上开始绘图

// 将画布的填充样式设置为红色
// 这里的值可以是颜色，渐变或图案，默认的fillStyle是黑色
ctx.fillStyle="#f00"; 

ctx.fillRect(0,0,150,75)

Canvas 坐标

Canvas画布是一个二维的网格，画布以左上角为原点，所以我们可以把左上角的坐标看做（0,0），和我们习惯使用的平面直角坐标系不同的是，这个二维网格的Y轴的正方向是向下的。
上面的代码中，使用了fillRect(0,0,150,75)这个方法，它的操作是，从左上角开始，绘制一个大小为150乘以75像素的矩形。

画线

第一种方式：

这里需要使用下面三个方法：

• moveTo(x,y) 定义线的起点坐标
• lineTo(x,y) 定义线的终点坐标
• stroke() 实际绘制出moveTo()和lineTo()方法定义的线的路径

// 在(0,0)坐标定义起点
ctx.moveTo(0,0);
// 在(200,100)坐标定义终端
ctx.lineTo(200,100);
// 实际绘制
ctx.stroke(); 

第二种方式：

这里需要使用下面四个方法：

• beginPath() 定义一个新路径
• moveTo() 定义线的起点坐标
• lineTo() 定义线的终点坐标
• stroke() 实际绘制

// 定义一个新路径：
ctx.beginPath();
// 定义起点：
ctx.moveTo(0, 0);
// 定义终点：
ctx.lineTo(200, 100);
// 绘制：
ctx.stroke();

定义线条宽度

lineWidth 属性定义在画布中绘制时要使用的线条宽度。
必须在调用 stroke() 方法之前设置。

ctx.lineWidth = 10;
ctx.stroke();

定义线条样式

strokeStyle 属性定义在画布中绘制时要使用的样式。
必须在调用 stroke() 方法之前设置。

ctx.strokeStyle = "red";
ctx.stroke();

定义线条两头端部的样式

lineCap属性定义线的端部样式（butt、round 或 square），默认为 square（方形）。
必须在调用 stroke() 方法之前设置。

ctx.lineCap = "round";
ctx.stroke();

画圆

这里需要使用下面三个方法：

• beginPath()
• arc(x, y, r, startAngle, endAngle, true/false)

ctx.beginPath(); // 开始绘制一个路径
ctx.arc(95,50,40,0,2*Math.PI,true); // 使用arc方法定义一个圆
ctx.stroke();

画弧线

弧线的画法和圆的画法及其相识，毕竟弧线是一部分圆

ctx.beginPath();
ctx.arc(100, 50, 50, 0, Math.PI);
ctx.stroke();

上面两段内容中，都用到了arc方法，这个方法有6个参数，下面对这6个参数做一个详细的解释。
arc(x, y, r, start, end, direction)

• 方法的前两个参数x和y，代表当前圆形或者弧线的圆心的在当前Canvas中的坐标，也就是下图中的center
• 第三个参数r，代表当前圆形或者弧线的半径
• 第四、五个参数start和end，代表路径开始的角度和结束的角度，也就是圆形或者弧线的起始位置和结束位置。这两个参数有个地方需要特别注意，它的角度是用Math.PI(π)表示的，在Canvas中规定，把一个完整的圆分成2PI，其中0PI和2PI都在圆心的正右方，如下图所示，0PI、0.5PI、1PI、1.5PI、2PI等等这些值，在圆上的位置是固定的。
• 第六的参数是个可选参数，它的值可以true或者false，代表的是从起始位置开始画弧线的方向（false顺时针/true逆时针）
  

画图形

还是前面画线时使用的几个方法，下面使用这几个方法来画一个几何图形

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

在上面的代码中，调用beginPath方法，说明Canvas画布上开始定义一个路径，moveTo方法定义了这个路径的起点，后面四个lineTo方法，在画布上定义了四个坐标点，最后stroke方法将这几个点连起来。

在Canvas中绘制几何图形的时候，一定要注意几个lineTo方法的顺序，并且最后一个lineTo的坐标一般和moveTo的坐标是相同的，这样正好能形成一个闭合的路径。

最终形成了下面的图形：

画矩形

使用前面画图形的方式，当然也可以画出矩形来，但是Canvas还提供了一个简单的方式来画矩形，那就是rect()方法。
下面使用这个方法来绘制一个150*100的矩形：

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();

rect()方法的前两个参数，指的是矩形的左上角x轴和y轴坐标。

Canvas 文本

在Canvas上绘制文本，有几个很重要的属性和方法：

• font 定义文本的字体属性
• fillText(text, x, y) 在画布上绘制“填充的”文本
• strokeText(text, x, y) 在画布上绘制无填充的文本

Canvas 渐变

渐变可以用于填充图形、线条、文本等，有两种不同类型的渐变：

• createLinearGradient(x,y,x1,y1) 创建线性渐变
• createRadialGradient(x,y,r,x1,y1,r1) 创建径向/圆形渐变

fillText()

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

strokeText()

ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

createLinearGradient()

// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

createRadialGradient()

// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Canvas 图形

在Canvas上绘制图形，需要使用drawImage(image, x, y)方法。
其中，image参数，是要在画布上绘制的图形对象，x和y是图形在画布上的起始坐标（左上角）。

<img src="xx.jpg" alt="橘猫" height="300" id="cat">

const img = document.getElementById("cat");
ctx.drawImage(img, 10, 10);