(四)canvas繪制路徑
阿新 • • 發佈:2018-08-02
ble 清除 需要 max 理解 1.0 寬度 content pda
- 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>
(四)canvas繪制路徑