3

簡単に言えば、Canvas を使用して、それぞれ独自の識別子を持つ 10 個の四角形を描画したいと考えています。ここに私が持っているものがありますが、これは私が知っている完全に間違っています:

$(document).ready(function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    for(i=0;i<10;i++){
        var b = new Box();
        context.drawImage(b, i*20,20);
    }
});

function Box() {
    this.x = 0;
    this.y = 0;
    this.width = 10;
    this.height = 10;
    this.fill = '#444444';
}

それぞれに ID を付けたい理由は、xml ドキュメントを介してそれぞれの高さを制御できるようにするためです。

4

1 に答える 1

1

「ボックス」要素を配列内に格納し、関数を使用して、ボックスの1つが変更されるたびにキャンバスを再描画する必要があると思います:

var boxes = [];
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

$(document).ready(function(){
    for(i=0;i<10;i++){
        boxes.push(new Box());
    }
    refreshCanvas();
});

function refreshCanvas()
{
    // -- Clear canvas:
    context .clearRect(0, 0, canvas.width, canvas.height);

    // -- Draw boxes:
    for(i=0; i<boxes.length; i++){
        context.beginPath();
        context.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
        context.stroke();
    }
}

function Box() {
    this.x = 0;
    this.y = 0;
    this.width = 10;
    this.height = 10;
    this.fill = '#444444';
}

次に、ボックスの 1 つを変更するたびに、refreshCanvas を呼び出すだけです。

于 2013-09-13T12:52:11.237 に答える