iT邦幫忙

DAY 2
0

HTML5 & CSS3系列 第 2

30天分享(4) - HTML5 <canvas> 標籤

<canvas> 標籤是HTML5的畫布功能,可以在其中繪圖,但標籤本身只是個容器,
畫布內容必須用 javascript 來產生裡面的圖形,簡單的介紹一下 <canvas> 的使用方法 :

在網頁任何想要置放繪圖區域的地方加上 :

<canvas id="canvas1" width="500" height="500" >
你的瀏覽器不支援HTML5 canvas 標籤
</canvas>

這樣會產生一個 500 x 500px 看不見的區塊,
接下來可以新增 <script> 標籤,在其中開始 javascript 的控制,
整張圖的起始座標為 <canvas> 標籤繪圖區域左上角的 (0,0) 點,
我們由畫矩形開始 :

<script>

var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "gray";
ctx.fillRect(0,0,150,75);

</script>

var c = document.getElementById("Canvas1");
這一行是由 javascript 選取 canvas 這個畫布元素,
var ctx = c.getContext("2d");
這行是使用 HTML5 的內建對象"2d"開始,
fillStyle 是填色,可以填入色碼,
fillRect 則是由這四個座標畫出矩形範圍,

最後會得到一個灰色的矩形。


上一篇
30天分享(3) - HTML5 <audio> 標籤
下一篇
30天分享(5) - HTML5 <video> 標籤
系列文
HTML5 & CSS328

1 則留言

0
丁大丙
iT邦研究生 5 級 ‧ 2014-10-02 22:16:43

最好在內文裡用 canvas就好,不要弄標籤,這樣會影響到it邦預覽頁面,出現一大塊空白了.

我要留言

立即登入留言