# Canvas - Note 1 : 設定 ###### tags: `DOM` ## (一) . canvas的基本屬性 1. ```id``` : 用來讓js抓取，進行js處理。 2. ```width``` 和```height``` : 不是css屬性，是HTML屬性。 - 都可以用來設定高和寬。 - 但是有時候css可能會跑版，需要用這個屬性設定。 3. 需要有end tag。 ## (二) . 基本設定 ```htmlembedded= <canvas id="mycanvas" width='500px' height='500px'> </canvas> ``` ```javascript= let canvas=document.getElemnetById('mycanvas'); let ctx=canvas.getcontents('2d'); ``` 1. 取得canvas tag ： 用id tag的方法。 2. 設定渲染內容 ：```canvas.getcontents('2d')```回傳canvas渲染的內容。 - ```'2d'``` : 為渲染的方式。 - 回傳的是```CanvasRenderingContext2D```。 ## (三) . 測試brower支持 ```javascript= let canvas = document.getElementById('tutorial'); if (canvas.getContext) { let ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } ``` - ```canvas.getContext``` : 可以測試brower是否支持。 ## (四) . Template ```javascript= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas tutorial</title> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"> </canvas> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } } </script> </body> </html> ```