在javascript中的画布中生成随机图像

Posted

技术标签:

【中文标题】在javascript中的画布中生成随机图像【英文标题】:spawn random images in canvas in javascript 【发布时间】:2014-10-14 00:00:30 【问题描述】:

大家好,我正在尝试使用画布制作一个 javascript 游戏。我想产生随机的敌人物体。到目前为止,我发现这是一个产卵示例:JSFiddle Demo

如何加载图片而不是球?任何帮助都会很棒。 Tnx。

// get a refrence to the canvas and its context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// newly spawned objects start at Y=25
var spawnLineY = 25;

// spawn a new object every 1500ms
var spawnRate = 1500;

// set how fast the objects will fall
var spawnRateOfDescent = 0.50;

// when was the last object spawned
var lastSpawn = -1;

// this array holds all spawned object
var objects = [];

// save the starting time (used to calc elapsed time)
var startTime = Date.now();

// start animating
animate();


function spawnRandomObject() 

// select a random type for this new object
var t;

// About Math.random()
// Math.random() generates a semi-random number
// between 0-1. So to randomly decide if the next object
// will be A or B, we say if the random# is 0-.49 we
// create A and if the random# is .50-1.00 we create B

if (Math.random() < 0.50) 
    t = "red";
 else 
    t = "blue";


// create the new object
var object = 
    // set this objects type
    type: t,
    // set x randomly but at least 15px off the canvas edges
    x: Math.random() * (canvas.width - 30) + 15,
    // set y to start on the line where objects are spawned
    y: spawnLineY,


// add the new object to the objects[] array
objects.push(object);




function animate() 

// get the elapsed time
var time = Date.now();

// see if its time to spawn a new object
if (time > (lastSpawn + spawnRate)) 
    lastSpawn = time;
    spawnRandomObject();


// request another animation frame
requestAnimationFrame(animate);

// clear the canvas so all objects can be 
// redrawn in new positions
ctx.clearRect(0, 0, canvas.width, canvas.height);

// draw the line where new objects are spawned
ctx.beginPath();
ctx.moveTo(0, spawnLineY);
ctx.lineTo(canvas.width, spawnLineY);
ctx.stroke();

// move each object down the canvas
for (var i = 0; i < objects.length; i++) 
    var object = objects[i];
    object.y += spawnRateOfDescent;
    ctx.beginPath();
    ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = object.type;
    ctx.fill();



【问题讨论】:

chimera.labs.oreilly.com/books/1234000001654/… @Alex,你能用我的代码做点什么吗? 【参考方案1】:

Fiddle Here

一种方法是拥有一个加载图像的全局数组:

var images = [img1, img2, ... ];

创建对象时,它会随机分配给images 数组中的一张图像。然后我们可以使用ctx.drawImage 方法绘制它的图像:ctx.drawImage(object.image,...))。现在重要的是要记住您需要先加载所有图像,如下所示:

var img1 = new Image();
img.src = "...";

并且要仅在加载所有内容时运行动画,我们可以使用onload

window.onload = function() 
    animate();

这是我们添加到 object 创建中的 obj.image 属性。这是从我们的images 数组中选择一个随机图像。

var object = 
    ...
    // give random image
    image: images[Math.floor(Math.random()*images.length)]

最后我们可以删除arc的绘图函数并进行绘图,并使用object.image进行绘图:

for (var i = 0; i < objects.length; i++) 
    var object = objects[i];
    object.y += spawnRateOfDescent;
    ctx.drawImage(object.image, object.x, object.y, 30, 30);

【讨论】:

tnx.这可以让我的生活更轻松。

以上是关于在javascript中的画布中生成随机图像的主要内容,如果未能解决你的问题,请参考以下文章

获取 HTML 并使用 rasterizehtml 在画布中生成图像 - 动态源图像

在javascript中生成随机整数的最快方法是啥?

如何在Javascript中生成随机数[重复]

在javascript中生成随机颜色的最佳方法? [关闭]

在 SpriteKit 中生成随机地形

如何在 Javascript 中生成随机柔和(或更亮)的颜色?