わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。

多角形の描画

HTML5のキャンバスを使って多角形の描画を行います。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>多角形の描画</title>
<script type="text/javascript">
    /*
        ページロード完了
    */
    function OnLoad() {

        // キャンバス取得
        var canvas = document.getElementById("canvas");

        // キャンバスの幅と高さを取得
        var width  = canvas.getAttribute("width");
        var height = canvas.getAttribute("height");

        // 中心
        var centerX = width  / 2;
        var centerY = height / 2;

        // ★サイズ
        var starSize = 50;

        // ログ
        console.log("width  = " + width);
        console.log("height = " + height);

        // キャンバスへ描画
        var context = canvas.getContext('2d');
        context.fillStyle = 'red';
        context.fillRect( 0, 0, width, height);
        context.beginPath();
        context.fillStyle = 'yellow';
        context.moveTo(centerX - 0, centerY - starSize);
        context.lineTo(centerX + starSize, centerY + starSize);
        context.lineTo(centerX - starSize * 1.2, centerY - starSize * 0.4);
        context.lineTo(centerX + starSize * 1.2, centerY - starSize * 0.4);
        context.lineTo(centerX - starSize, centerY + starSize);
        context.closePath();
        context.fill();
    }
</script>
</head>
<body bgcolor="#c0c0ff" onload="OnLoad()">
<h1>多角形の描画</h1>
<canvas width="300" height="200" id="canvas" style="background-color:black;"></canvas>
<br/>
<a href="../html5_list.html">戻る</a>
</body>
</html>





わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。