Question

我正在绘制一个简单的动态画布，我想知道如何使我的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>

我现在的问题是图像在各处跳跃......我希望它们从上方慢慢“下降”并回到原点:(

Answer 1

看看这个小提琴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 - 但我猜你想在没有帮助库的情况下学习）

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

<强> EDIT2

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

Answer 2

这就是您所需要的：http://edumax.org.ro/extra/new/imagetut/ 您可以在此处获取代码：http://edumax.org.ro/extra/new/imagetut/script.js

图像在画布上多次出现？

2 个答案: