HTML5基礎之Canvas詳解
什麼是Canvas?
在新的HTML標準HTML5中Canvas 元素用於在網頁上繪製圖形,該元素標籤強大之處在於可以直接在HTML上進行圖形操作,具有極大的應用價值。
畫布是一個矩形區域,您可以控制其每個像素。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法,可以創建豐富的圖形引用。
下面我們來看一段程式碼
<article> <header> <meta charset="utf-8"> </header> <canvas id="canvas" width="150" height="150"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,200)"; ctx.fillRect(10, 10, 50, 50); </script> </article>
透過javascript來畫出一個矩形
下面我們再來看一個實例,畫一個圓形
<article> <header> <meta charset="utf-8"> </header> <canvas id="myCanvas" width="200" height="100"></canvas> <script> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </article>