(三)canvas繪制樣式
阿新 • • 發佈:2018-08-02
document ice 連接 scala fff utf-8 技術分享 mar black
- 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>
(三)canvas繪制樣式