初识 Canvas（使用 Canvas 绘制直线图形）
参考
| 项目 | 描述 |
|---|---|
| 从 0 到 1：HTML 5 Canvas 动画开发 | 黄振杰 |
| MDN | Canvas 教程 |
| 搜索引擎 | Bing |
描述
| 项目 | 描述 |
|---|---|
| Edge | 109.0.1518.61 (正式版本) (64 位) |
Canvas
你可以使用 JavaScript 在 HTML 5 元素 Canvas 上进行 2D 或 3D 图形的绘制。Canvas 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。
Canvas 与 SVG
HTML 5 有两个主要的 2D 图形技术，即 Canvas 与 SVG 。两者的区别如下：
| 项目 | Canvas | SVG |
|---|---|---|
| 生成方式 | 通过 JavaScript 动态生成。 | 使用 XML 静态描述。 |
| 结果 | 位图 | 矢量图 |
| 重绘 | 若发生修改，Canvas 需要进行重绘 | 不需要重绘 |
Canvas 元素
Canvas 是一个行内块元素，即该元素的 display 属性的值为 inline-block 。默认情况下，Canvas 元素的宽与高分别为 300px 、150px 。在创建 Canvas 元素时，你可以通过该元素的属性 width 为该元素指定宽度，使用属性 height 元素为该元素指定高度。
替补元素
Canvas 元素已被大多数浏览器所支持，如果你担心旧版本浏览器无法显示 Canvas 元素，你可以在 Canvas 元素内部嵌套另一个元素（替补元素）。如果浏览器支持 Canvas 元素，则 Canvas 元素内部嵌套的另一个元素将被忽略；如果浏览器不支持 Canvas 元素，则 Canvas 元素将被忽略，而其内部的元素将正常发挥作用。例如：
<canvas id="canvas" width="600px" height="400px">
<h1>当前浏览器不支持 HTML 5 元素 Canvas，如果 Canvas 元素影响了您的体验，请更换浏览器访问本网页。</h1>
</canvas>
注：
请不要省略 canvas 元素的结束标签 </canvas>，否则该元素后的元素都将被认为是 canvas 元素的替补元素。如果浏览器支持 canvas 元素，则 canvas 之后的元素都将无法正常显示。
使用
canvas 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
canvas 起初是空白的。为了展示，首先 JavaScript 脚本需要找到渲染上下文，然后在它的上面绘制。canvas 元素对应的 DOM 对象有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。该方法可以接收一个参数，用于指定上下文的类型。对于 2D 图像的绘制，你可以使用 2d 作为该函数的参数。
检测
你可以通过检测 canvas 元素对应的 DOM 对象的 getContext 属性是否为 undefined 来判断该浏览器是否支持 canvas，并依次决定下一步的操作。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识 Canvas（使用 canvas 绘制直线图形）</title>
<style>
*{
/* 去除元素的部分默认属性 */
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
/* 使 canvas 元素在浏览器视口（可视区域）居中显示 */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas{
/* 为 canvas 元素设置边框并为边框设置圆角 */
border: 2px solid dodgerblue;
border-radius: 5px;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="400px">
<h1>当前浏览器不支持 HTML 5 元素 Canvas，如果 Canvas 元素影响了您的体验，请更换浏览器访问本网页。</h1>
</canvas>
<script src="./index.js"></script>
</body>
</html>
index.js
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 的渲染上下文
const canvas = canvas_e.getContext('2d');
}else{
console.log('Canvas Not Supported')
}
绘制直线图形
使用 canvas 绘制不同的直线图形，需要变化的仅仅只是 JavaScript 部分的代码。在本篇文章的后续讲解中，默认 HTML 部分使用如下代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识 Canvas（使用 canvas 绘制直线图形）</title>
<style>
*{
/* 去除元素的部分默认属性 */
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
/* 使 canvas 元素在浏览器视口（可视区域）居中显示 */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas{
/* 为 canvas 元素设置边框并为边框设置圆角 */
border: 2px solid dodgerblue;
border-radius: 5px;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="400px">
<h1>当前浏览器不支持 HTML 5 元素 Canvas，如果 Canvas 元素影响了您的体验，请更换浏览器访问本网页。</h1>
</canvas>
<script src="./index.js"></script>
</body>
</html>
直线
在 Canvas 中，我们可以使用 canvas 元素对应的 DOM 对象的 lineTo() 及 moveTo() 方法的配合来绘制直线。
其中，lineTo() 用于描述画笔的走向，而 moveTo() 则用于移动画笔。lineTo() 及 moveTo() 函数均接收两个参数，其中第一个参数为 X 轴坐标，第二个参数为 Y 轴坐标。坐标 (0, 0) 位于画布的左上角。
注：
- 在 Canvas 的坐标系中，Y 轴坐标有上到下是递增的。
- canvas 元素对应的 DOM 对象的方法在需要距离的地方直接使用数字即可，默认单位为 像素 。
- 画笔没有默认的起始位置。因此，在绘制图形之前，你必须使用 moveTo() 方法将画笔移动至画布中的某个地方，否则图形将无法被成功绘制。
- 使用 moveTo() 与 lineTo() 方法仅仅只是对线条的描述，如果需要将描述付诸实际还需要在对线条描述完成后使用 stroke() 方法将线条画出来。
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
// 指定开始绘制的起始地点
canvas.moveTo(0, 0);
// 移动画笔至画布中坐标为 (200px, 200px) 的位置
canvas.lineTo(200, 200);
// 开始对图形进行绘制
canvas.stroke();
}else{
console.log('Canvas Not Supported')
}
效果：
同时绘制多条直线
指定起点
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.moveTo(0, 0);
canvas.lineTo(200, 200);
canvas.moveTo(0, 0);
canvas.lineTo(150, 300);
canvas.stroke();
}else{
console.log('Canvas Not Supported')
}
注：
你可以在每次使用 lineTo() 方法对直线的轨迹进行描述前通过 moveTo() 方法为该直线的绘制指定绘制的起点。
执行效果：
首尾相接
如果你没有在多个 lineTo() 之间使用 moveTo() 函数来为直线的绘制指定绘制的起点，那么上一条直线的终点将作为下一条直线的起点（第一条直线的起点必须使用 moveTo() 方法来进行指定）。
让我们利用这个特性来绘制一个三角形：
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.moveTo(0, 0);
canvas.lineTo(150, 300);
canvas.lineTo(300, 150);
canvas.lineTo(0, 0);
canvas.stroke();
}else{
console.log('Canvas Not Supported')
}
效果：
多彩的直线
你可以通过使用 canvas 对应的 DOM 对象的 strokeStyle 属性来指定画笔的颜色。颜色你可以通过赋予 strokeStyle 属性如下类型的表示进行指定。
- 十六进制表示的颜色值
- rgba()
- rgb()
- 颜色关键字，如 red 。
使用如下代码绘制一个红色的三角形：
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.moveTo(0, 0);
canvas.strokeStyle = "rgb(255, 0, 0)";
canvas.lineTo(150, 300);
canvas.lineTo(300, 150);
canvas.lineTo(0, 0);
canvas.stroke();
}else{
console.log('Canvas Not Supported')
}
矩形
canvas 提供了两种方法绘制矩形：
| 项目 | 描述 |
|---|---|
| fillRect(x, y, width, height) | 绘制填充矩形 |
| strokeRect(x, y, width, height) | 绘制描边矩形 |
其中：
fillRect() 与 strokeRect() 方法的参数及意义均相同。
x 与 y 表示矩形左上角所在的坐标；
width 与 height 则分别表示矩形宽度与高度。
描边矩形
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.strokeRect(150, 100, 300, 200);
}else{
console.log('Canvas Not Supported')
}
效果：
注：
同直线一样，你可以在使用 strokeRect() 方法绘制描边矩形之前通过 strokeStyle 属性来设置矩形边框的颜色。
填充矩形
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.fillRect(150, 100, 300, 200);
}else{
console.log('Canvas Not Supported')
}
效果：
注：
你可以在使用 fillRect() 方法绘制描边矩形之前通过 fillStyle 属性来设置填充矩形所用到的颜色。
结合体
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.strokeStyle = "dodgerblue";
canvas.strokeRect(150, 100, 300, 200);
canvas.fillStyle = "pink";
canvas.fillRect(150, 100, 300, 200);
}else{
console.log('Canvas Not Supported')
}
效果：
清除矩形区域
你可以使用 clearRect(x, y, width, height) 来指定需要被清除的矩形区域，被清除的区域将不会有任何 canvas 内容。
// 通过 DOM API 获取 canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 检测浏览器对 canvas 元素的支持性
if(canvas_e.getContext){
// 如果浏览器支持则获取 canvas 元素的渲染上下文
const canvas = canvas_e.getContext('2d');
canvas.strokeStyle = "dodgerblue";
canvas.strokeRect(150, 100, 300, 200);
canvas.fillStyle = "pink";
canvas.fillRect(150, 100, 300, 200);
// 对绘制的矩形进行部分清除
canvas.clearRect(250, 150, 200, 100)
}else{
console.log('Canvas Not Supported')
}
效果：
注：
- 观察本示例效果图可以发现，矩形的边框并没有被清除。这表明为矩形添加边框，边框并不是在原矩形内部生成的，而是在矩形的外围生成的。矩形的总面积（矩形面积及边框面积）在添加边框后增大了。
- 在本示例中，你可以使用 clearRect(0, 0, canvas.width, canvas.height) 清除 Canvas 中的所有内容。
多边形
Canvas 并没有提供绘制多边形的 API ，但我们可以通过绘制多条直线的方式绘制各种各样的多边形。
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
