HTML5基礎(chǔ)之Canvas詳解
什么是Canvas?
在新的HTML標(biāo)準(zhǔn)HTML5中Canvas 元素用于在網(wǎng)頁(yè)上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在HTML上進(jìn)行圖形操作，具有極大的應(yīng)用價(jià)值。
畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，可以創(chuàng)建豐富的圖形引用。
下面我們來(lái)看一段代碼
<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>通過(guò)javascript來(lái)畫(huà)出一個(gè)矩形
下面我們?cè)賮?lái)看一個(gè)實(shí)例，畫(huà)一個(gè)圓形
<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> 
