1.什麼是canvas? 可以繪製圖形的標簽。一般用javascript來繪製。 2.創建一個畫布 3.在畫布上繪圖。 4.canvas-路徑 效果： ...
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();
效果：
