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 ://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 回答
0

看看这个小提琴http://jsfiddle.net/joevallender/D83uC/10/

我最近向朋友解释了画布的一些基础知识。尽管我使用的是形状而不是 .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，它可以简单地为球设置动画。重点仍然存在，如果您不想要“小径”，则需要清除画布

把画布想象成窗户油漆，而不是闪光。您绘制的东西不是可编辑的对象。每次都需要重新绘制整个东西。（除非你使用的 JS 库让事情看起来更像 flash - 但我猜你一开始想在没有帮助库的情况下学习）

正如我所说，我最近正在向某人解释画布，您可以通过更改 URL http://jsfiddle.net/joevallender/D83uC/3 末尾的数字来查看我发送给您的两个链接之间的各个阶段http://jsfiddle.net/joevallender/D83uC/4 等。

编辑2

或者，如果我误解了，请发布一个 jsfiddle，让我们知道它有什么问题

于 2012-08-23T11:06:30.353 回答