canvas 是一种基于 html5 的图形绘制技术，它提供了一个可编程的位图画布区域，允许开发者通过 javascript 实现动态图形、动画、数据可视化及交互式内容的渲染。
1、 创建一个 Canvas 元素
可通过 <canvas> 标签在网页中声明一个画布容器。
2、 在 HTML5 页面中插入 canvas 元素以支持图形绘制。
该元素本身不显示任何内容，需配合 JavaScript 调用绘图 API 才能呈现图像。
3、 设定元素的 ID 及宽高属性
例如：<canvas id="myCanvas" width="400" height="300"></canvas>，用于后续脚本获取与操作。
4、 用 Canvas 画一条直线
需先获取上下文（如 getContext('2d')），再调用 beginPath()、moveTo()、lineTo() 和 stroke() 方法完成绘制。
5、 }
6、 将画笔移动到坐标点 (20, 30)，作为初始位置。
对应代码为 ctx.moveTo(20, 30)，设定路径起点。
7、 将线条绘制至坐标点（120, 90）作为第二个端点。
对应代码为 ctx.lineTo(120, 90)，连接起始点与终点并形成线段。
8、 }
9、 画渐变线
利用 createLinearGradient() 创建线性渐变对象，并通过 addColorStop() 设置颜色停靠点，再将其赋给 strokeStyle 后绘制。
立即学习“前端免费学习笔记（深入）”；
10、 画一个简易的矩形框
使用 strokeRect(x, y, width, height) 方法可直接描边绘制矩形轮廓。
11、 画个圆并填满
通过 beginPath()、arc() 定义圆形路径，再调用 fill() 方法实现填充效果。
