Hatena::Groupjavascript

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

2010年11月10日(水)

Canvas API (その1) 三角形の描画

| 11:53 |  Canvas API (その1) 三角形の描画 - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク -  Canvas API (その1) 三角形の描画 - lnzntのJavaScript日記  Canvas API (その1) 三角形の描画 - lnzntのJavaScript日記 のブックマークコメント

三角形の描画。(Firefox 3.6 で確認)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>HTML5 文書のサンプル</title>
</head>

<script>
(function () {
    window.addEventListener("load", function () {
        var canvas = document.getElementById('sample');
        var ctx = canvas.getContext('2d');

        // パス定義
        ctx.beginPath();
        ctx.moveTo(150, 20);
        ctx.lineTo(250, 130);
        ctx.lineTo(50,  130);
        ctx.closePath();

        // パス描画
        ctx.stroke();  // 塗り潰しなら ctx.fill();
    }, false);
})();
</script>
(参考書籍のサンプルコードとほぼ同じです)

<body>
    <h1>Canvas サンプル</h1>
    <canvas id="sample" width="300" height="150"/>
</body>
</html>

参考書籍

Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

HTML5 標準

| 11:06 |  HTML5 標準 - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク -  HTML5 標準 - lnzntのJavaScript日記  HTML5 標準 - lnzntのJavaScript日記 のブックマークコメント

標準へのリンク
簡単なサンプル

Firefox 3.6 で確認。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>HTML5 文書のサンプル</title>
</head>
<body>
    <p>これは HTML5 文書です。</p>
</body>
</html>

参考書籍

Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

that

| 11:01 |  that - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク -  that - lnzntのJavaScript日記  that - lnzntのJavaScript日記 のブックマークコメント

var add = function (a, b) { return a + b; };
var myObject = { value : 0 };

myObject.x2 = function () {
    var that = this;   // 退避
    var helper = function () {
        that.value = add(that.value, that.value);
    }
    helper(); // helper を関数として呼び出す
};

myObject.value = 3;
myObject.x2();   // x2 をメソッドとして呼び出す
myObject.value;  // 6

関数呼び出しでは this にグローバルオブジェクトが設定される。

that に this を退避することで上のような場合に対処する。

(that という名前は通例らしい)

参考書籍