Hatena::Groupandroid

lnzntの Android 日記 このページをアンテナに追加 RSSフィード

2012年04月15日(日)

HTML5 の Canvas

01:30 | HTML5 の Canvas - lnzntの Android 日記 を含むブックマーク はてなブックマーク - HTML5 の Canvas - lnzntの Android 日記 HTML5 の Canvas - lnzntの Android 日記 のブックマークコメント

Canvas API を使った簡単な HTML5 文書を、ホストの Ubuntu Linux に置いて、エミュレータでアクセスしてみました。

f:id:lnznt:20120415011812j:image

ボタンクリックで三角が描けました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>Canvas Sample</title>
    <script>
        function drawTriangle() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            ctx.beginPath();
            ctx.moveTo(50, 10);
            ctx.lineTo(90, 90);
            ctx.lineTo(10, 90);
            ctx.closePath();

            ctx.stroke();
        }
    </script>
</head>
<body>
    <h1>Canvas サンプル</h1>
    <button onclick="drawTriangle()">三角を描く</button>
    <canvas id="canvas"></canvas>
</body>
</html>