HTML5新特性，畫布（Canvas）
阿新 • • 發佈：2021-07-01
HTML5 <canvas> 標籤用於繪製圖像（通過指令碼，通常是 JavaScript）。<canvas> 元素本身並沒有繪製能力（它僅僅是圖形的容器） ，你必須使用指令碼來完成實際的繪圖任務。
getContext() 方法可返回一個物件，該物件提供了用於在畫布上繪圖的方法和屬性。
一、參考如下程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <h1>html5-坦克大戰</h1> <!--坦克大戰的戰場--> <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> <script type="text/javascript"> //得到畫布 var canvas1 = document.getElementById("tankMap"); //定義一個位置變數 var heroX = 80; var heroY = 80; //getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。 var cxt = canvas1.getContext("2d"); //設定顏色 cxt.fillStyle="#BA9658"; //左邊的矩形 cxt.fillRect(heroX,heroY,5,30); //右邊的矩形 cxt.fillRect(heroX+17,heroY,5,30); //畫中間的矩形 cxt.fillRect(heroX+6,heroY+5,10,20); //畫出坦克的蓋子 cxt.fillStyle="#FEF26E"; cxt.arc(heroX+11,heroY+15,5,0,360,true); cxt.fill(); //畫出炮筒 cxt.strokeStyle="#FEF26E"; cxt.lineWidth=1.5; cxt.beginPath(); cxt.moveTo(heroX+11,heroY+15); // 定義線條開始座標 cxt.lineTo(heroX+11,heroY); // 定義線條結束座標 cxt.closePath(); cxt.stroke(); // 在畫布上繪製 150x75 的矩形，從左上角開始 (200,2000)。 cxt.fillStyle="#FF0000"; cxt.fillRect(200,200,150,75); // 使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（空心）： cxt.fillStyle="#FEF26E"; cxt.font="30px Arial"; cxt.strokeText("Hello World",30,30); </script> </body> </html>
二、執行結果如下圖
三、HTML5 <canvas> 參考手冊
地址：https://www.runoob.com/tags/ref-canvas.html
本文參考：
https://www.cnblogs.com/top8/p/6203100.html
https://www.runoob.com/tags/ref-canvas.html