在画布上多次出现的图像

Image appearing multiple times on canvas?

本文关键字：图像      更新时间：2023-09-26

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

我现在的问题是，图像到处都是。。。我希望它们从上面慢慢"落下"，然后再回来：（

看看这把小提琴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);

EDIT也许这个例子太多了，没有用。

请查看更早的版本http://jsfiddle.net/joevallender/D83uC/2这个简单的动作会使球产生动画效果。不过，要点仍然存在，如果您不想要"踪迹"，则需要清除画布

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

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

EDIT2

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

这就是您所需要的：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);
    }
}  
}

这段代码只解释了这个概念，它本身不会起作用，对于完整版本，请查看上面的链接。

相关文章：