始めに

オーライリージャパンの「HTML5 Canvas」に掲載されているサンプルコードを改造してみました

背景

本書の趣旨としておそらく、JavaScriptの初心者が読むことを考慮しているのかサンプルコードはCanvasをFunctionの一つのローカル変数として扱っている
Canvasタグの解説としては本書のような関数にCanvasオブジェクトを閉じ込めてしまってもいいが、実務では動的にDiv+Canvasを扱いたくなる場合もあるかもしれない
なので、サンプルプログラムをオブジェクト指向風に改造して、動的にDiv+Canvasを生成できるようにした

ソースの解説

CanvasのオブジェクトとCanvasに対する操作は一つのFunctionオブジェクトにまとめています
テキストボックスに入れた数値が動的に作られるDiv+Canvasの座標になります。Divはpostionをrelativeに指定しているので、divの座標は最後に追加されたDivが基準になります。
本来、この手のアプリはReactあたりを使ったほうがDomのわずらわしさから解放されるからいいと思うのだけど、今回はそこまでするのも面倒くさいので、パスしています

ソース

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch1Ex3: Your First Canvas Application </title>
<script src="modernizr-2.0.6.js"></script>
<script>

var canvasCnt=0;
//動的にCanvas付きのDivを生成する
function appendcanvas(divId,divAttributes){
    var parentDiv = document.getElementById("parentDiv")
    var childDiv = document.createElement("div");
    var divId=divId+canvasCnt
    var canvasId="appendedcanvas"+canvasCnt;

    childDiv.setAttribute("id",divId)
    childDiv.style.borderStyle="solid"
    childDiv.style.width="100px"
    childDiv.style.height="120px"
    childDiv.style.position="relative"
    childDiv.style.top=divAttributes[0]
    childDiv.style.left=divAttributes[1]
    parentDiv.appendChild(childDiv)

    var appendedcanvas = document.createElement("canvas");
    appendedcanvas.setAttribute("id",canvasId)
    childDiv.appendChild(appendedcanvas)

    var canvasObj = new CanvasObject ();
    if(!canvasObj.init("appendedcanvas"+canvasCnt)){
        return;
    }
    canvasObj.setBackground("#ffaaaa",[0, 0, 100, 120])
    canvasObj.setText("#000000","20px _sans","top",["added", 10, 20])
    //canvasObj.drawBox("#000000",[5, 5, 490, 290])
    canvasCnt++;
}


window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function () { };
Debugger.log = function (message) {
    try {
        console.log(message);
    } catch (exception) {
        return;
    }
}

function eventWindowLoaded () {
    drawScreen();
}

function canvasSupport () {
    return Modernizr.canvas;
}
function drawScreen() {
    var canvasObj = new CanvasObject ();
    if(!canvasObj.init("canvasOne")){
        return;
    }
    canvasObj.setBackground("#ffffaa",[0, 0, 500, 300])
    canvasObj.setText("#000000","20px _sans","top",["Hello World!", 195, 80])
    canvasObj.drawImage("helloworld.gif",[160, 130])
    canvasObj.drawBox("#000000",[5, 5, 490, 290])
}


function CanvasObject () {
    var theCanvas;
    var context; 
    //canvasの初期化
    this.init = function(canvasId){
        if (!canvasSupport()) {
            return false;
        }
        theCanvas = document.getElementById(canvasId);//"canvasOne"
        context = theCanvas.getContext("2d"); 
        Debugger.log("Drawing Canvas");
        return true;
    }

    //canvasの背景を設定する(四角形を描画し、内部を塗りつぶす)
    this.setBackground=function(fillStyle,fillRect){
        context.fillStyle = fillStyle;//"#ffffaa";
        context.fillRect(fillRect[0],fillRect[1],fillRect[2],fillRect[3]); //0, 0, 500, 300
    }

    //文字列を描画する
    this.setText =function(fillStyle,font,textBaseline,textAttribute){
        context.fillStyle    = fillStyle;
        context.font         = font ;
        context.textBaseline = textBaseline;
        context.fillText(textAttribute[0],textAttribute[1],textAttribute[2] );//"Hello World!", 195, 80
    }

    //イメージを設定する
    this.drawImage=function(imageSrc,position){
        //image
        var helloWorldImage = new Image();
        helloWorldImage.onload = function () {
            context.drawImage(helloWorldImage,position[0],position[1]);/
        }
        helloWorldImage.src = imageSrc//"helloworld.gif";
    }
    //canvasの枠をつける
    this.drawBox=function(strokeStyle,strokeRect){
        context.strokeStyle = strokeStyle//"#000000";
        context.strokeRect(strokeRect[0],strokeRect[1],strokeRect[2],strokeRect[3]);
    }
}


</script> 
</head>
<body>
<div style="position:relative;top:10px;">
    <input type=text id='xaxis'>
    <input type=text id='yaxis'>
    <input type="button" value="キャンバス追加" 
    onclick="appendcanvas('mydiv',[document.getElementById('xaxis').value+'px',document.getElementById('yaxis').value+'px'])">
</div>
<div style="position: absolute; top: 50px; left: 50px;width:1200px;height:700px;border-style:solid;border-color: red;" id="parentDiv">
    <div style="position:relative;top: 50px; left: 50px;border-style:solid;width:500px; height:300px">
        <canvas id="canvasOne" width="500" height="300">
        Your browser does not support HTML 5 Canvas.
        </canvas>
    </div>
</div>
</body>
</html>

JavaScript:HTML5 Canvas

始めに

背景

ソースの解説

ソース