前言
<canvas> 标签用于定义图形容器，容器本身是没有画图能力的，但我们可以使用脚本来绘制图形
目录
1、创建画布
2、创建画笔
3、绘制矩形
4、绘制路径
5、绘制文字
6、添加样式
7、创建图片
正文
1、创建画布
在 HTML 中，使用 <canvas> 标签可以创建一个矩形画布，这个画布的默认宽高为 300*150
如果要改变画布的大小，建议通过内联样式或者脚本进行设置，否则很容易会出现画布扭曲的情况
<!DOCTYPE html> <html> <head> <title>Canvas Demo</title> </head> <body> <canvas id="graph" width="300" height="300">您的浏览器不支持 canvas 标签</canvas> </body> </html>
2、创建画笔
在 JavaScript 中，使用 getContext() 方法可以创建一个渲染上下文对象
这个对象就相当于是这个画布的画笔，拥有一系列用于画图的方法
<script> var canvas = document.getElementById('graph') var context = canvas.getContext('2d') // 开始画图 </script>
3、绘制矩形
Canvas 只支持一种原生图形的绘制方法，那就是矩形，其它图形都必须通过路径生成
- strokeRect(x, y, width, height)：绘制一个矩形的边框
- fillRect(x, y, width, height) ：绘制一个填充的矩形
- clearRect(x, y, width, height) ：清空指定的矩形区域
其中，参数 x、y 定义矩形左上角的坐标，参数 width、height 定义矩形的宽高
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') ctx.strokeRect(10, 10, 100, 100) </script>
4、绘制路径
图形的基本元素是路径，路径是线段和点的集合，在 Canvas 中每一个路径都是闭合的
- beginPath() ：新建一条路径
- closePath() ：结束一条路径，它会从当前点到起始点拉一条直线，使得路径闭合
- moveTo(x, y)：将画笔移动到指定坐标
- stroke()：绘制图形（闭合路径）的边框
- fill() ：填充图形（闭合路径）的内容，如果路径没有闭合，首先闭合路径
lineTo(x, y)：创建一条直线路径，从当前坐标到(x, y)连接一条直线
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') ctx.beginPath() ctx.moveTo(150, 90) ctx.lineTo(60, 210) ctx.lineTo(240, 210) ctx.closePath() // 结束一条路径，从当前点到起始点拉一条直线，使得路径闭合 ctx.stroke() // 绘制图形（闭合路径）的边框 </script>
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') ctx.beginPath() ctx.moveTo(150, 90) ctx.lineTo(60, 210) ctx.lineTo(240, 210) ctx.fill() // 填充图形（闭合路径）的内容，如果路径没有闭合，首先闭合路径 </script>
- arc(x, y, r, startAngle, endAngle, anticlockwise)：创建一段圆弧路径
- 以 (x, y) 为圆心，以 r 为半径，从 startAngle 开始，到 endAngle 结束，画一段圆弧
- 如果 anticlockwise 为 true，则逆时针画，如果 anticlockwise 为 false，则顺时针画
arcTo(x1, y1, x2, y2, radius)：创建一段圆弧路径
首先我们从当前坐标到(x1, y1)画一条直线，然后想象从(x1, y1)到(x2, y2)画一条直线
最后画一段半径为radius并且与以上两条直线相切的圆弧
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') ctx.beginPath() ctx.arc(150, 150, 100, Math.PI*1.5, Math.PI*0.5, true) ctx.fill() ctx.beginPath() ctx.moveTo(50, 50) ctx.arcTo(250, 50, 250, 250, 100) ctx.stroke() </script>
- quadraticCurveTo(cpx, cpy, x, y)：绘制二次贝塞尔曲线
- 其中，(cpx, cpy) 表示控制点的坐标，(x, y) 表示结束点的坐标
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：绘制三次贝塞尔曲线
- (cp1x, cp1y) 是第一个控制点的坐标，(cp2x, cp2y) 是第二个控制点的坐标，(x, y) 是结束点的坐标
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') ctx.beginPath() ctx.moveTo(25, 100) ctx.quadraticCurveTo(75, 50, 125, 100) ctx.stroke() ctx.beginPath() ctx.moveTo(175, 250) ctx.bezierCurveTo(205, 200, 245, 200, 275, 250) ctx.stroke() </script>
5、绘制文字
我们可以使用以下两个方法绘制文字：
strokeText(text, x, y)：在指定坐标(x, y)处创建空心文本textfillText(text, x, y)：在指定坐标(x, y)处创建实心文本text
还能使用以下属性指定文字样式：
- font：指定文本样式，与 CSS font 属性取值相同，默认值为 10px sans-serif
- textAlign：指定文本对齐选项
若为 start ，则表示文本在指定的位置开始（默认值）
若为 end ，则表示文本在指定的位置结束
若为 left ，则表示文本左对齐
若为 right ，则表示文本右对齐
若为 center，则表示文本的中心在指定的位置
- textBaseline：指定基线对齐选项
若为 alphabetic ，则表示文本基线是字母基线（默认值）
若为 ideographic，则表示文本基线是表意基线
若为 hanging ，则表示文本基线是悬挂基线
若为 top ，则表示文本基线是 <em> 方框的顶端
若为 middle，则表示文本基线是 <em> 方框的中心
若为 bottom，则表示文本基线是 <em> 方框的底端
- direction：指定文本方向
若为 inherit，则表示继承父元素（默认值）
若为 ltr，则表示文本方向从左到右
若为 rtl，则表示文本方向从右到左
<script> var cvs = document.getElementById('graph') var ctx = cvs.getContext('2d') ctx.font = '50px sans-serif' ctx.strokeText('Hello', 80, 160) </script>
