- 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>
原文地址:https://www.cnblogs.com/bgwhite/p/9406799.html
时间: 2024-11-10 16:24:15