开始使用 Canvas

这几天整理的一下过往的文章和笔记，备份到了 Github 上，地址👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~ 👆

---

canvas 是 HTML5 新增的标签，它就像一块幕布，可以用 JavaScript 在上面绘制各种图表、动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

<canvas>您的浏览器不支持 Canvas</canvas>

canvas 默认是看不见的，为了帮助我们可视化 canvas 元素，我们为它添加一个边框：

canvas {
  border: #333 10px solid;
}

效果如下：

为 canvas 添加边框

调整我们的 canvas 元素

默认情况下，canvas 元素是宽 300 像素和高 150 像素，如果您需要更改 canvas 的大小，可以使用 width 和 height 属性：

<canvas width="550px" height="350px"></canvas>

简单示例

我们使用 Canvas API 来画一条对角线。

首先，我们为 canvas 添加一个 id，方便我们使用 JS 去操作它：

<canvas id="myCanvas" width="550px" height="350px"></canvas>

访问 canvas 元素：

const canvas = document.querySelector('#myCanvas')

获取渲染上下文：

const context = canvas.getContext('2d')

移动虚拟笔并指定起始坐标和结束坐标：

context.moveTo(50, 50)
context.lineTo(450, 300)
 
// 绘制完后，关闭路径
context.closePath()

指定了绘制的线的厚度和颜色：

context.lineWidth = 20
context.strokeStyle = 'plum'

最后，将线绘制在 canvas 上：

context.stroke()

最终效果如下：

使用 Canvas API 画一条直线