Canvas とは何ですか?

新しい HTML 標(biāo)準(zhǔn) HTML5 では、Canvas 要素は Web ページにグラフィックを描畫するために使用されます。この要素タグの機(jī)能は、HTML 上でグラフィック操作を直接実行できることであり、これには大きな応用価値があります。

キャンバスは、すべてのピクセルを制御できる長方形の領(lǐng)域です。

キャンバスには、パス、長方形、円、文字を描畫したり、畫像を追加して豊富なグラフィック參照を作成したりするための複數(shù)の方法があります。

コードを見てみましょう

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