十分钟上手 canvas，对着 demo 来，包会！我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养

我正在参加码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 10 天，点击查看活动详情。

认识 canvas

canvas，习惯性称呼为画布，一种 html 标签，会像 div 一样，占据页面上的一块区域，我们可以通过 js 使用 canvas 提供的一些 API 来动态的绘制一些东西

例如，一些知名的 js 库，如 three.js， echarts.js 都是基于 canvas 实现，下面分别上一个对应的 demo

canvas 可以实现许多酷炫的效果，但我们需要先了解他的最基本的用法

如图，坐标系的右下角用 绿色矩形 圈出来的地方，表示 canvas 的可见区域，我们可以在可见区域外继续绘制图形，但不会显示，效果类似于 css 中的 overflow: hidden

坐标轴的原点对应着 canvas 元素的左上角定点。在 canvas 所有使用的坐标例如 (x, y) 也遵循图示的约定

如果我们对坐标轴进行合理的平移、旋转、缩放等操作，便能够显示原本不在可见区域的内容，此项内容后续再详细展开

定义一个 canvas 标签

<canvas id="canvas" style="border: 1px solid;"></canvas>

为其设置长宽，并获取到核心的操作引用：画笔，我们接下来所有的绘制操作，都是基于这个 画笔

let canvas = document.getElementById('canvas');
canvas.width = '600';
canvas.height = '600';
// 拿到画笔
let context = canvas.getContext("2d");

context.lineWidth = 10，定义画笔的粗细为10个像素

context.strokeStyle = '#00f'，定义画笔的描边的颜色，即封闭图形的 边框色

context.fillStyle = '#f00，定义画笔的填充色，画一个封闭的图形后的 填充色

// 标记绘制开始
context.beginPath(); 
// 开始绘制
// draw()
// 对绘制的图形进行描边【或填充】
context.stroke(); // 。fill()
// 标记绘制结束
context.closePath();
// 图形效果开始显示

为了突出重点，从这里开始的代码块，都省略了 context.beginPath(); 和 context.closePath();

涉及到2个核心方法：

// 画一个简单的三角形
context.moveTo(100, 100);
context.lineTo(100, 200);
context.lineTo(150, 150);
context.lineTo(100, 100);

context 直接提供了两个现成的 api，一键调用即可，猜测是对画线相关的 api 的高度封装

context.strokeRect(x, y, width, height);
context.fillRect(x, y, width, height);

x, y 表示矩形的左上角起点

width, height 指矩形的长宽

核心的 API 为：context.arc(x, y, r, startAngle, endAngle, anticlockwise)

x, y, r 指画弧时用到的圆心以及半径参数

startAngle, endAngle 指弧的交互，如需要一个圆（即 360 的弧），两个参数可以设置为 0， Math.PI * 2

anticlockwise 指画弧时是否需要反向画，如我们默认的弧为 [0, 0.5PI]，若设置为 true，则弧为 [0.5Pi, 2PI]

如果我们设置弧为 2PI