什么是Canvas?

在新的HTML標準HTML5中Canvas 元素用于在網(wǎng)頁上繪制圖形，該元素標簽強大之處在于可以直接在HTML上進行圖形操作，具有極大的應(yīng)用價值。

畫布是一個矩形區(qū)域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，可以創(chuàng)建豐富的圖形引用。

下面我們來看一段代碼

<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>