所以我一直在玩帆布.试图模拟随机落下的物体,绘制背景图像是没有问题的,而不是应该模拟雨滴的第二个img.
我可以得到随机x下降,但现在我不确定如何循环下降图像x次由变量noOfDrops设置.
我把循环注释掉了,只有一滴掉落的工作代码是:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Regn</title>
<script type="text/javascript">
var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 50;
var fallingDrops = [];
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';
/*for (var i = 0; i < noOfDrops; i++) {
var fallingDr = imgDrops[i];
fallingDr.x = Math.random() …Run Code Online (Sandbox Code Playgroud)