(四)canvas绘制路径
-
save()
-
样式不受污染的起始范围
-
shadowOffsetX
-
阴影x轴的距离
-
shadowOffsetY
-
阴影y轴的距离
-
shadowBlur
-
模糊度
-
shadowColor
-
阴影颜色
-
restore()
-
保护样式不受污染的结束范围
-
clearRect()
-
可以理解为橡皮擦
-
参数四个:x轴,y轴,宽度,高度
-
清除整个画布:0,0,oC.width,oC.height
<!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> function $(id) { return document.getElementById(id); } var c1 = $("c1"); var ctx = c1.getContext("2d"); ctx.lineWidth = 20;//改变画出的图形的边框粗细,需要写在前面 ctx.save(); ctx.strokeStyle = "red"; ctx.shadowOffsetX = 10;//阴影x轴的距离 ctx.shadowOffsetY = 10;//阴影y轴的距离 ctx.shadowBlur = 5;//模糊 ctx.shadowColor = "blue";//阴影的颜色 ctx.beginPath(); ctx.moveTo(100,200); ctx.lineTo(100,300); ctx.lineTo(200,300); ctx.closePath(); ctx.stroke(); ctx.restore(); ctx.beginPath(); ctx.moveTo(0,100); ctx.lineTo(0,200); ctx.lineTo(100,200); ctx.closePath(); ctx.stroke(); ctx.clearRect(50,50,100,100);//清除可以理解为橡皮擦 //ctx.clearRect(0,0,oC.width,oC.height);//清除整个画布 </script> </body> </html>
作者:狗尾草
-------------------------------------------
个性签名:海到无边天作岸,山登绝顶人为峰!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!