Canvasに点を描く

2016-11-25 管理者

Contents

1 点
- 1.1 共有:

ページ上にJavaScriptを用いて点を描画します。

ここでも、やはり、Canvasを使用します。

（注）Canvasの詳しい説明は、記事「Canvasに長方形を描く」をご参照ください。

点の描画は、以下の手順となります。

canvasを設定する
canvas上に点を描画する

点

しかし、Canvasには「canvas上に点を描画する」関数はありません。

ここでは、「点」を「最小サイズの長方形」とみなして、点を描画します。

点を描画する関数はない。
「点」は、「最小サイズの長方形」とみなす。

（注）最小サイズ：横幅１pixel×高さ１pixel

「点」を「最小サイズの長方形」とみなすことで、簡単に「点」を描画し消去できます。

プログラム

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
        <title>Draw Point</title>
        <script>
        // グローバル変数
            var x = 100;    // 点の位置（x座標）
            var y =  50;    // 点の位置（y座標）
            var w =   1;    // 点の横幅
            var h =   1;    // 点の高さ
            var context;    // コンテキスト
        // 点の描画準備
            window.onload = function() {
                var canvas  = document.getElementById("canvas");
                    context = canvas.getContext("2d");
            }
        // 点の描画
            function drawRectangle() {
                context.fillStyle = "orange";
                context.fillRect(x, y, w, h);				
            }
        // 点の消去
            function clearRectangle() {
                context.clearRect(x, y, w, h);
            }
        </script>
    </head>
    <body>
        <canvas width="300" height="200" id="canvas" style="background-color:green;"></canvas>
        <br>
        <input type="button" value= "draw" onclick= "drawRectangle()">
        <input type="button" value="clear" onclick="clearRectangle()">
    </body>
</html>

機能