直线案例 · 前端速查手册

[TOC] >[success] # 常用的属性 ~~~ 1.画笔起始位置 ctx.moveTo(100,200) 2.画直线定位点 ctx.lineTo(200,200) 3.描边显示直线 ctx.stroke() 4.设置线条颜色 ctx.strokeStyle=“blue” 5.设置线条粗细 ctx.lineWidth = 10; 6.设置每一个线条独立 ctx.beginPath() 7.填充内部颜色 ctx.fill(); 8.设置填充颜色 ctx.fillStyle = 'red'; 9.自动闭合线条 ctx.closePath() 10.填充色的顺时逆时针效果 11.线条端点效果 ctx.lineCap = butt/square/round 12.线条折线点效果 ctx.lineJoin = 'miter'/'bevel'/'round' 13.绘制虚线 ctx.setLineDash([20]); ~~~ >[success] # 绘制平行线 ~~~ 1.默认的宽度是多少 1px 2.默认的颜色是什么黑色 3.产生原因：对齐的点是线的中心位置会把线分成两个0.5px 显示的是会不饱和增加宽度解决方案前后移动0.5px ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/2ddea8eea8a3872768ce9c9c645bf23d_600x296.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid #cccccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas') var ctx = myCanvas.getContext('2d'); // 实际根据调整的显示效果 ctx.moveTo(100,100.5) ctx.lineTo(200,100.5) //没有经过调整的显示效果 ctx.moveTo(100,200) ctx.lineTo(200,200) ctx.stroke() </script> </body> </html> ~~~ >[success] # 带有颜色的三条平行线 ~~~ 1.首先声明 ctx.beginPath() 为了告诉三条线相互没有关系，各自描边，不声明代码自上而下最后的会覆盖所有样式 2.设置线条颜色 ctx.strokeStyle=“blue” 3.设置线条宽度 ctx.lineWidth = 10; 4.关闭但前线条用描边 ctx.stroke(); ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/9e406e4221e533cc5093e9ae55d9084b_604x400.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*画平行线*/ ctx.beginPath();/*Kai*/ /*蓝色 10px*/ ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.strokeStyle = 'blue'; ctx.lineWidth = 10; /*描边*/ ctx.stroke(); /*红色 20px*/ ctx.beginPath();/*Kai*/ ctx.moveTo(100,200); ctx.lineTo(300,200); ctx.strokeStyle = 'red'; ctx.lineWidth = 20; /*描边*/ ctx.stroke(); /*绿色 30px*/ ctx.beginPath();/*Kai*/ ctx.moveTo(100,300); ctx.lineTo(300,300); ctx.strokeStyle = 'green'; ctx.lineWidth = 30; /*描边*/ ctx.stroke(); </script> </body> </html> ~~~ >[success] # 绘制三角形 * 第一个描述产生的问题 ![](https://box.kancloud.cn/022a9d3c21a63e714796d8bd475a0133_285x194.png) ~~~ 1. 用ctx.lineTo定义三个点坐标，不好的地方是，最后一个点用lineTo和起始点moveTo重合的地方会产生缺口 2. 解决缺口问题自动闭合使用 ctx.closePath(); 3. 填充颜色使用ctx.fill(); 4. 设置填充颜色默认黑色 ctx.fillStyle = 'red'; ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/09b03f39272e520c4feb0ee85be771da_262x218.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.绘制一个三角形*/ ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); /*起始点和lineTo的结束点无法完全闭合缺角*/ /*使用canvas的自动闭合 */ // ctx.lineTo(100,100); /*关闭路径*/ ctx.closePath(); ctx.lineWidth = 10; /*2.描边*/ ctx.stroke(); /*3.填充*/ //ctx.fill(); </script> </body> </html> ~~~ >[success] # 填充色 ![](https://box.kancloud.cn/ff10941d70fa12c839001669bf84d42d_741x333.png) >[danger] ##### 案例 ![](https://box.kancloud.cn/5be22b12dad2d3ab7350845dde095bbe_429x403.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid #cccccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas') var ctx = myCanvas.getContext('2d'); /*1.绘制两个正方形一大200一小100 套在一起*/ // 顺时针 ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.lineTo(300,300); ctx.lineTo(100,300); ctx.closePath(); // 逆时针 ctx.moveTo(150,150); ctx.lineTo(150,250); ctx.lineTo(250,250); ctx.lineTo(250,150); ctx.closePath(); /*2.去填充*/ //ctx.stroke(); ctx.fillStyle = 'red'; ctx.fill(); </script> </body> </html> ~~~ >[success] # 线条两端样式/拐点效果 ~~~ 1.设置线两端的ctx.lineCap = butt/square/round 默认无样式/添加一个矩形样式帽子/半圆样式帽子 2.设置折线ctx.lineJoin = 'miter'/'bevel'/'round' 默认无样式/平头样式/半圆样式 ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/7beddf8027a99e82045516f57dbbd395_545x392.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*画平行线*/ ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(200,20); ctx.lineTo(300,100); ctx.strokeStyle = 'blue'; ctx.lineWidth = 10; ctx.lineCap = 'butt'; ctx.lineJoin = 'miter'; ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,200); ctx.lineTo(200,120); ctx.lineTo(300,200); ctx.strokeStyle = 'red'; ctx.lineWidth = 20; ctx.lineCap = 'square'; ctx.lineJoin = 'bevel'; ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,300); ctx.lineTo(200,220); ctx.lineTo(300,300); ctx.strokeStyle = 'green'; ctx.lineWidth = 30; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke(); </script> </body> </html> ~~~ >[success] # 绘制虚线 ![](https://box.kancloud.cn/7ba4a3b00ffa3fae73eb5cac1fbd44dc_428x148.png) >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*画线*/ ctx.moveTo(100,100.5); ctx.lineTo(300,100.5); /*[5,10] 数组是用来描述你的排列方式的*/ ctx.setLineDash([20]); /*获取虚线的排列方式获取的是不重复的那一段的排列方式*/ console.log(ctx.getLineDash()); /*如果是正的值往后偏移*/ /*如果是负的值往前偏移*/ ctx.lineDashOffset = -20; ctx.stroke(); </script> </body> </html> ~~~