標籤：
1.什麼是canvas?
可以繪製圖形的標籤。一般用javascript來繪製。
2.建立一個畫布
1 <!DOCTYPE html>2 <html>3 <head>4 <title></title>5 </head>6 <body>7 <canvas id="mycanvas" width="100" height="100"></canvas> //建立畫布用canvas標籤8 </body>9 </html>
3.在畫布上繪圖。
1 <script type="text/javascript"> 2 //用javascript來繪製映像 3 //擷取到canvas元素 4 var can=document.getElementById("mycanvas"); 5 //建立html5的內建對象，擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。 6 var draw=can.getContext("2d"); 7 //fillStyle();可以是css的顏色，漸層，圖案 8 draw.fillStyle="red"; 9 //fillRect(x,y,width,height) 定義填充方式10 draw.fillRect(0,0,125,12);12 </script>
4.canvas-路徑
1 var can=document.getElementById("mycanvas"); 2 var draw=can.getContext("2d"); 3 // 開始一個路徑 4 draw.beginPath(); 5 // 設定線的粗細 6 draw.lineWidth="5"; 7 //設定線的顏色 8 draw.strokeStyle="green"; 9 // 線的起點10 draw.moveTo(0,75);11 //線的終點 12 draw.lineTo(250,75);13 // 開始繪製路徑14 draw.stroke();15 //開始另一個路徑16 draw.beginPath();17 // 設定線的粗細18 draw.lineWidth="5";19 draw.strokeStyle="purple";20 draw.moveTo(25,05);21 draw.lineTo(35,25);22 draw.stroke();
效果：
html5學習筆記：canvas
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
