HTML5的新功能 <canvas>标签 - 在网页上用javascript画图

等待UFO

可以将两个<canvas>重叠在一起，  底层的用来显示背景图， 上层的用来动态地画图   ， 如果上层的<canvas>上动态的画移动的小人 ， 那么就能高效地实现类似游戏里的效果了。

HTML----------------------------------------------------------------------------
...
<div id="canvasBox" style="border:1px solid gray; padding:5px;width:812px;height:412px;">
            <canvas id="backgroundCanvas" width="800" height="400"
                           style="background-color:lightgrey;"></canvas>
            <canvas id="forgroundCanvas" width="800" height="400"
                           style="position:relative;left:0px;top:-405px;"></canvas>
</div>
...
---------------------------------------------------------------------------------------------

JS----------------------------------------------------------------------------------------
...
//描画オブジェクト作成
    var drawer = {};
    drawer.backgroundCanvas = document.getElementById("backgroundCanvas");
    drawer.backgroundDc = drawer.backgroundCanvas.getContext("2d");  //Device Context
    drawer.forgroundCanvas = document.getElementById("forgroundCanvas");
    drawer.forgroundDc = drawer.forgroundCanvas.getContext("2d");
    //描画領域の矩形を保持
    drawer.backgroundCanvasRect = new myNameSpace.Rectangle();
    drawer.backgroundCanvasRect.w = drawer.backgroundCanvas.width;
    drawer.backgroundCanvasRect.h = drawer.backgroundCanvas.height;
    //背景画像を描画する
    var bkImg = new Image();
    bkImg.src = "./img/2058583--embed2.jpg";
    bkImg.onload = function () {
        //背景画像を比例縮小しながら、描画する
        drawer.backgroundDc.drawImage(bkImg,
                                      0,
                                      0,
                                      bkImg.width,
                                      bkImg.height,
                                      0,
                                      0,
                                      drawer.backgroundCanvasRect.w,
                                      drawer.backgroundCanvasRect.h);
        //文字列の幅を取得し、背景に描画 OK
        /*
        var metrics = drawer.backgroundDc.measureText("abcABCあいうえお漢字");
        drawer.backgroundDc.fillText("「abcABCあいうえお漢字」の幅:" + metrics.width,
                                      20, 60);
        */
        // createImageData() / getImageData() / putImageData()
        //var img01 = context.createImageData(100,80);  //100X80の画像データ領域作成
        //後は offset = 4 * (x + y * width) で　(x,y)ピクセル位置を計算し
        // var byteB = data[offset + 0]; // 0 - 255
        // var byteG = data[offset + 1];
        // var byteR = data[offset + 2];
        // var byteA = data[offset + 3];  // 0 - 1
        //で各分量を取得、編集し、
        // context.putImageData(img01, dx, dy); で描画
        //100ms後に実行
        //setTimeout(drawForground, 100);
        //100ms毎に実行
        var handle = setInterval(drawForground, 100);


/**
    * 前画面を描画する
    */
    var drawForground = function () {
        var posX = Math.random() * 800;
        var posY = Math.random() * 400;
        if (posX < 0)
            posX = 0;
        if (posX > 800)
            posX = 800;
        if (posY < 0)
            posY = 0;
        if (posY > 400)
            posY = 400;
        //再描画：　前回の描画をクリア
        drawer.forgroundDc.clearRect(0, 0,
                                      drawer.backgroundCanvasRect.w,
                                      drawer.backgroundCanvasRect.h);
        drawer.forgroundDc.fillStyle = "rgba(255,0,0,0.5)";
        drawer.forgroundDc.fillRect(posX, posY, 20, 20);
    };//end drawForground()

...
---------------------------------------------------------------------------------------------

--效果图   为了方便，前台只画一个不断变换位置的矩形而已（实际上可以按照需要画一些复杂图形）

      背景是固定不变的图    前台是不断变化的图

等待UFO

矩形类是在myNamespace命名空间里定义的， 如下：

//名前空間だけは、必ずwindowグローバルオブジェクトに定義しておくこと
var myNameSpace = window.myNameSpace || {};
(function () {
    /**
    * ポイントクラス
    */
    myNameSpace.Point = function () {
        this.x = 0;
        this.y = 0;
    };//end Point

    /**
    * 矩形クラス
    */
    myNameSpace.Rectangle = function () {
        this.x = 0;
        this.y = 0;
        this.w = 0;
        this.h = 0;

        var me = this;

        /**
        * 指定されたポイントが該当矩形ないにあるかどうかを判断する
        *
        * params point:Point  判断するポイント
        * return   :bool      true:該当矩形内に存在; false:該当矩形内に存在しない
        */
        this.ptInRect = function (point) {
            if(point.x>=me.x && point.y>=me.y &&
                point.x <= me.x + me.w && point.y <= me.y + me.h) {
                return true;
            } else {
                return false;
            }//end if
        };//end ptInRect()
    };//end Rectangle
})();

类的定义可以在任意地方， 这些都不是重点。

重点就是两个canvas可以重叠在一起，然后可以用“图层”的思想来画图。

等待UFO

前景上画个移动的恐龙   当前景图片本身是有透明背景的png图片的时候， 也可以反映到canvas上。





有了 HTML5的canvas ， javascript画图也变得非常简单。 只是为什么没有画椭圆的函数呢。。。  

等待UFO

没有椭圆函数   椭圆要用ベジェ曲線画。。。  真是麻烦