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()方法才是真的执行了绘制操作。
绘制直线示例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绘制直线</title>
</head>
<body>
<canvas
id="canvas"
width="500"
height="500"
style="border: 1px dashed #333333"
></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.moveTo(50, 100);
ctx.lineTo(150, 50);
ctx.stroke();
};
</script>
</body>
</html>
用直线画一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绘制直线</title>
</head>
<body>
<canvas
id="canvas"
width="500"
height="500"
style="border: 1px dashed #333333"
></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
ctx.moveTo(50, 100);
ctx.lineTo(150, 50);
ctx.lineTo(150, 100);
ctx.lineTo(50, 100);
ctx.stroke();
};
</script>
</body>
</html>
