15、HTML5 畫布
<canvas> 標簽定義圖形、,比如圖表和其他圖像,您必須使用腳本來繪制圖形
HTML5 <canvas> 元素用於圖形的繪制,通過腳本 (通常是JavaScript)來完成
<canvas> 標簽只是圖形容器,您必須使用腳本來繪制圖形
創建一個畫布:
一個畫布在網頁中是一個矩形框,通過 <canvas> 元素來繪制
註意: 默認情況下 <canvas> 元素沒有邊框和內容
實例 --->
<canvas id="myCanvas" width="200" height="100"></canvas>
註意:
提示:你可以在HTML頁面中使用多個 <canvas> 元素
使用 style 屬性來設置邊框,實例 --->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
運行效果 --->
您的瀏覽器不支持 HTML5 canvas 標簽。
提示:瀏覽器還未支持HTML5
使用JavaScript來繪制圖像:
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成 --->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的瀏覽器不支持 HTML5 canvas 標簽。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
實例解析:
首先,找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然後,創建 context 對象:
var ctx=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法
下面的兩行代碼繪制一個紅色的矩形:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
設置fillStyle屬性可以是CSS顏色,漸變,或圖案。fillStyle 默認設置是#000000(黑色)
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式
Canvas 坐標:
canvas 是一個二維網格。
canvas 的左上角坐標為 (0,0)
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是:在畫布上繪制 150x75 的矩形,從左上角開始 (0,0)。
坐標實例
如下圖所示,畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。鼠標移動的矩形框上,顯示定位坐標。
X Y
15、HTML5 畫布