canvas繪圖 · 前端速查手冊

>[success] # canvas 繪圖步驟 ~~~ 1.創建一個畫布標簽<canvas></canvas> 2.獲取畫布元素 var myCanvas = document.querySelector('canvas'); 3.獲取上下文，繪制工具箱 var ctx = myCanvas.getContext('2d'); 4.確定畫筆的起始點坐標分別為x，y ctx.moveTo(100,100); 5.繪制線條坐標 ctx.lineTo(200,100); 6.進行描邊 ctx.stroke(); ~~~ >[danger] ##### 入門代碼 ![](https://box.kancloud.cn/b9f1c81969821e140a287ed591633a1e_326x166.png) ~~~ 1.注意控制畫布大小的在標簽上定義，在style 定義的是內容大小 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px solid #ccc; /*不建議在樣式設置尺寸*/ /*width: 600px; height: 400px;*/ } </style> </head> <body>    <canvas width="600" height="400" ></canvas>   <script> /*1.獲取元素*/ var myCanvas = document.querySelector('canvas'); /*2.獲取上下文繪制工具箱 */ /*是否有3d 暫時沒有*/ var ctx = myCanvas.getContext('2d'); /*web gl 繪制3d效果的網頁技術*/ /*3.移動畫筆*/ ctx.moveTo(100,100); /*4.繪制直線 (軌跡，繪制路徑)*/ ctx.lineTo(200,100); /*5.描邊*/ ctx.stroke(); </script> </body> </html> ~~~