目录
引言
1 绘图工具
1.1 canvas初体验
1.2 解决绘图重绘问题
2 绘图方法
2.1 连线方式
2.2线帽
3 渐变方案
3.1 线性渐变
3.2 径向渐变
4 填充效果
4.1 非零环绕原则进行填充
引言
HTML5 的 <canvas> 元素提供了一个通过 JavaScript 绘制图形的方式，使得网页上的动态和交互式图形成为可能。<canvas> 本身只是一个容器，你需要在上面使用 JavaScript 和 Canvas API 来绘制内容。
1 绘图工具
### 绘图工具
☞ 介绍canvas画布
☞ 设置画布大小： 使用属性方式设置
☞ 解决画布重绘问题
1. 设置一次描边
2. 开启新的图层
1.1 canvas初体验
落笔->连线->描边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取画布 var canvas=document.querySelector("canvas"); //获取画布上下文对象 var ctx=canvas.getContext("2d"); //绘图步骤： 落笔点->连线->描边 ctx.moveTo(100, 100); //落笔 ctx.lineTo(100, 300); //连线 ctx.stroke(); //描边 </script> </body> </html>
1.2 解决绘图重绘问题
解决方式一：设置一个stroke()
解决方式二：在绘制新的图形前，开启新的图层（独立互不影响）
未解决前的效果：首先画了最上面的一条线，遇到第二个描边的时候，又重新执行了一次，画了两条线，所以最上面的一条颜色较深。
解决效果：
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); //先落笔 ctx.moveTo(100, 100); // 连线 ctx.lineTo(300, 100); //描边 ctx.stroke();//方案一，删掉 //创建新图层（否则下面的设置会影响上面的图） ctx.beginPath();//方案二，填上图层 //带颜色的横线 ctx.moveTo(100, 150);//落笔 ctx.lineTo(300, 150);//连线 ctx.strokeStyle = "red"; //红色的线 // ctx.lineWidth = "20"; //设置线宽 ctx.stroke(); </script> </body>
2 绘图方法
### 绘图方法
ctx.moveTo(x,y) 落笔点
ctx.lineTo(x,y) 连线
ctx.stroke() 描边ctx.beginPath()； 开启新的图层
颜色： strokeStyle="值"
线宽： linewidth="值" 备注：不需要带单位线连接方式： lineJoin: round | bevel | miter (默认)
线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square
闭合路径： ctx.closePath()
2.1 连线方式
线连接方式： lineJoin: miter (默认) | round | bevel
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); ctx.lineWidth = "20"; ctx.strokeStyle = "red"; // 设置线的链接方式 ctx.lineJoin = "miter"; ctx.moveTo(100, 50); ctx.lineTo(200, 100); ctx.lineTo(100, 150); ctx.stroke(); ctx.beginPath(); // 设置线的链接方式 ctx.lineJoin = "round"; ctx.strokeStyle = "blue"; ctx.lineWidth = "20"; ctx.moveTo(250, 50); ctx.lineTo(350, 100); ctx.lineTo(250, 150); ctx.stroke(); ctx.beginPath(); ctx.lineJoin = "bevel"; ctx.strokeStyle = "pink"; ctx.lineWidth = "20"; ctx.moveTo(400, 50); ctx.lineTo(500, 100); ctx.lineTo(400, 150); ctx.stroke(); </script> </body>
2.2线帽
线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); ctx.strokeStyle = "red"; ctx.lineWidth = "20"; //设置线帽 ctx.lineCap = "butt"; ctx.moveTo(100, 50); ctx.lineTo(300, 50); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = "20"; ctx.strokeStyle = "blue"; //设置线帽 ctx.lineCap = "round"; ctx.moveTo(100, 100); ctx.lineTo(300, 100); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = "20"; ctx.strokeStyle = "green"; //设置线帽 ctx.lineCap = "square"; ctx.moveTo(100, 160); ctx.lineTo(300, 160); ctx.stroke(); </script> </body>
3 渐变方案
注意：
线性渐变用描边ctx.stroke();
径向渐变用填充ctx.fill();
3.1 线性渐变
☞ 线性渐变
1.var grd=ctx.createLinearGradient(x0,y0,x1,y1);
- x0-->渐变开始的x坐标
- y0-->渐变开始的y坐标
- x1-->渐变结束的x坐标
- y1-->渐变结束的y坐标
2、设置渐变颜色方案
grd.addColorStop(0,"black");设置渐变的开始颜色
grd.addColorStop(0.1,"yellow"); 设置渐变的中间颜色
grd.addColorStop(1,"red"); 设置渐变的结束颜色
3、设置颜色
ctx.strokeStyle=grd;
4、描边
ctx.stroke();
备注：
addColorStop(offse,color);
中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数
例：
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); //创建渐变方案 var lgd = ctx.createLinearGradient(100, 50, 300, 50); //添加开始颜色 lgd.addColorStop(0, "red"); //添加结束颜色 lgd.addColorStop(1, "blue"); //设置颜色 ctx.strokeStyle = lgd; ctx.lineWidth = "50"; ctx.moveTo(100, 50);//落笔 ctx.lineTo(300, 50);//连线 ctx.stroke(); //描边 </script> </body>
3.2 径向渐变
☞ 径向渐变
ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
- (x0,y0)：渐变的开始圆的 x,y 坐标
- r0：开始圆的半径
- (x1,y1)：渐变的结束圆的 x,y 坐标
- r1：结束圆的半径
1
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); var rgd = ctx.createRadialGradient(200, 150, 50, 200, 150, 100); rgd.addColorStop(0, "red"); rgd.addColorStop(1, "pink"); ctx.fillStyle = rgd; ctx.moveTo(100, 50); ctx.lineTo(300, 50); ctx.lineTo(300, 300); ctx.lineTo(100, 300); ctx.closePath(); ctx.fill(); </script> </body>
4 填充效果
ctx.fill(); 设置为填充效果
ctx.fillstyle="值"; 设置填充颜色
4.1 非零环绕原则进行填充
☞ 非零环绕原则：
1. 任意找一点，越简单越好
2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）
3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则填充。
4. 非零区域不填充
（就是填充线条方向不同围成的区域）
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); //顺时针 ctx.moveTo(200, 100); ctx.lineTo(400, 100); ctx.lineTo(400, 300); ctx.lineTo(200, 300); ctx.closePath(); //逆时针 ctx.moveTo(250, 150); ctx.lineTo(250, 250); ctx.lineTo(350, 250); ctx.lineTo(350, 150); ctx.closePath(); // ctx.stroke(); ctx.fillStyle = "pink"; ctx.fill(); </script> </body>
