持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
Canvas 简介
HTML Canvas，说得简单一点，就是使用 JavaScript 操作 Canvas 元素绘制各种图形的技术。
使用 Canvas 元素绘制图形大体需要三步：
- 获取 Canvas 对象；
- 获取上下文环境对象；
- 开始绘制图形。
入门示例
我们先来编写一个非常简单的入门示例 —— 绘制一条直线。
声明 Canvas DOM 元素
<canvas id="canvas" width="200" height="150" style="border: 1px dashed #333333"></canvas>
声明 Canvas DOM 元素时我们指定了4个属性：id、width、height 和 style。默认情况下，Canvas 的宽度为300px，高度为150px。
操作 Canvas 元素绘制图形
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.moveTo(50, 100);
ctx.lineTo(150, 50);
ctx.stroke();
我们首先使用 document.getElementById()方法获取到 canvas 对象，然后使用 canvas 对象的getContext("2d")方法获取上下文环境对象 context，最后使用 context 对象的属性和方法绘制了一条直线。
Canvas 对象常用属性和方法
| 属性或方法 | 说明 |
|---|---|
| width | Canvas 的宽度 |
| height | Canvas 的高度 |
| getContext("2d") | 获取 Canvas 2D 上下文环境对象 |
获取 Canvas 的宽度和高度：
var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
console.log("Canvas的宽度为：", width, "，高度为：", height);
直线的绘制
在 Canvas 中，绘制一条直线需要 moveTo()和lineTo()两个方法配合使用。绘制一条直线的语法如下：
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
其中ctx表示上下文环境对象 context。
(x1, y1)表示直线的起点坐标。moveTo(x1, y1)的含义是将画笔移动到(x1, y1)位置。
(x2, y2)表示直线的终点坐标。lineTo(x2, y2)的含义是从起点(x1, y1)位置到终点(x2, y2)位置绘制一条直线。
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
上面两行代码只是确定了直线的起点和终点，还没有真正绘制直线。只有调用了上下文对象的stroke()方法才是真的执行了绘制操作。
