0

単純な動的キャンバスを描画していますが、drawImageメソッドの.pngファイルをキャンバスのさまざまな場所で同時に40回表示するにはどうすればよいでしょうか。よろしくお願いします！:)

お返事ありがとうございます！これは私が今得た限りです：

<script type="text/javascript">
var ctx;
var imgBg;
var imgDrops;
var x = 40;
var y = 0;
    function setup() {
        var canvas = document.getElementById('canvasRegn');

        if (canvas.getContext) {
                ctx = canvas.getContext('2d');
        setInterval('draw();', 36);
        imgBg = new Image();
        imgBg.src = 'dimma.jpg';

        imgDrops = new Image();
        imgDrops.src = 'drop.png';

        }
    }

function draw() {
    drawBackground();

    for(var i=0; i <= 40; i++) {    
    ctx.drawImage (imgDrops, x, y);
    y += 3;
    if(y > 450)
            y = -20;
        x=Math.random()*600;
    }

}

function drawBackground(){  
    ctx.drawImage(imgBg, 0, 0);
}
</script>

私の問題は、画像があちこちでジャンプしていることです...上からゆっくりと「落下」して戻ってきてほしいです:(

4

2 に答える 2

0

このフィドルを見てくださいhttp://jsfiddle.net/joevallender/D83uC/10/

最近、canvas の基本を友人に説明するために作成しました。.png ファイルの代わりに形状を使用していますが、探しているループは同じだと思います。

コードの重要な部分は、以下のループです

setInterval(function(){
  // clear stage
  context.clearRect(0, 0, width, height);
  for(var i = 0; i < balls.length; i++) {
    balls[i].move(balls);
  }
}, 1000/FPS)

FPS は変数であり、.move() は新しい座標を計算してボール オブジェクトを再描画する関数です。

単に「ステージ」をクリアしていない可能性があると思いますcontext.clearRect(0, 0, width, height);

編集おそらく、その例は役に立たないほど多くのことが行われていました。

単純にボールをアニメーション化する以前のバージョンhttp://jsfiddle.net/joevallender/D83uC/2を参照してください。ただし、要点は残ります。「トレイル」が必要ない場合は、キャンバスをクリアする必要があります

キャンバスはフラッシュではなく、Windows ペイントのようなものだと考えてください。描いたものは編集可能なオブジェクトではありません。毎回全体を描き直す必要があります。(物事をよりフラッシュのように見せるJSライブラリを使用しない限り-しかし、最初はヘルパーライブラリなしで学びたいと思います)

私が言ったように、私は最近誰かにキャンバスを説明していました.URL http://jsfiddle.net/joevallender/D83uC/3 の最後の番号を変更することで、私があなたに送った2つのリンクの間のさまざまな段階を見ることができます. http://jsfiddle.net/joevallender/D83uC/4 など

EDIT2

または、誤解している場合は、jsfiddle を投稿して、何が問題なのかをお知らせください

于 2012-08-23T11:06:30.353 に答える
0

これはあなたが必要とするものです: http://edumax.org.ro/extra/new/imagetut/ ここでコードを取得できます: http://edumax.org.ro/extra/new/imagetut/script.js

関連する部分は次のとおりです。

function draw_image(){
//draw one image code
}
window.onload = function () {
   for (var i=0;i<10;i++){
    for (var j=0;j<10;j++){
        draw_image(10+i*40, 10+j*40, 40, 40);
    }
}  
}

このコードは概念を説明するだけで、それ自体では機能しません。完全なバージョンについては、上記のリンクを確認してください。

于 2012-08-23T16:23:07.797 に答える