(三)canvas绘制样式
![](https://images2018.cnblogs.com/blog/1430556/201808/1430556-20180802140232331-1118553645.png)
-
beginPath()
-
对画线点的一个开始限制
-
moveTo()
-
画线的起点,只在开头使用
-
参数两个x轴,y轴
-
lineTo()
-
后续连线
-
两个参数x轴,y轴
-
stroke()
-
连线无填充
-
fill()
-
填充,默认黑色
-
closePath()
-
对画线点的一个结束限制
-
自动起着连接起点的作用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>(二)canvas绘制多边形</title> </head> <style> * {margin: 0;padding: 0;} body { background-color: black; } #c1 { background-color: #fff; } </style> <body> <canvas id="c1" width="400" height="400"></canvas> <script> var oC = document.getElementById("c1"); var ctx = oC.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(200,200); ctx.lineTo(300,200); ctx.closePath(); ctx.stroke();//只进行连线 ctx.beginPath(); ctx.moveTo(100,200); ctx.lineTo(200,300); ctx.lineTo(300,300); ctx.closePath(); ctx.fill();//填充连线的多边形 </script> </body> </html>
作者:狗尾草
-------------------------------------------
个性签名:海到无边天作岸,山登绝顶人为峰!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!