我实际上正在尝试实现我可以使用数组和kineticJs将多个图像添加到画布上的功能。我无法将图像加载到画布上，但这些图像是在画布主体外部创建的。我想将这些圆形图像绘制到画布主体上。干杯
<html>
<head>
<title>Bomb Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src = "https://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
</head>
<body>
<div id = "container"></div>
<script>
window.onload = $(document).ready(function()
{
var bombLeft, bombTop, bombRight, bombBottom;
var timerLeft, timerTop, timerRight, timerBottom;
var numberCircles = [];
function loadImages(sources, callback)
{
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources)
{
numImages++;
}
for(var src in sources)
{
images[src] = new Image();
images[src].onload = function()
{
if(++loadedImages >= numImages)
{
callback(images);
}
};
images[src].src = sources[src];
}
}
var newCanvas = document.createElement("canvas");
var ctx = newCanvas.getContext("2d");
newCanvas.width = window.innerWidth;
newCanvas.height = window.innerHeight;
newCanvas.style.border = "10px solid #000000";
newCanvas.style.margin = "0px";
$("#container").append(newCanvas);
var sources = {background: 'bomb_artwork/background.jpg', bomb: 'bomb_artwork/bomb.png', timer: 'bomb_artwork/timer.png',
boxSmall: 'bomb_artwork/box_1.png',boxBig: 'bomb_artwork/box_2.png', numberCircle: 'bomb_artwork/number_circle.png', explode: 'bomb_artwork/explode.png'};
function initStage(images)
{
var stage = new Kinetic.Stage({
container: 'container',
width: newCanvas.width,
height: newCanvas.height
});
var layer = new Kinetic.Layer();
loadImages(sources,function(images){
<!-- For background image -->
ctx.drawImage(images.background,0,0,newCanvas.width,newCanvas.height);
x1 = newCanvas.width/7;
y1 = newCanvas.height/3;
x2 = newCanvas.width/8;
y2 = newCanvas.height/8;
<!-- To add boxes in background>
ctx.drawImage(images.boxBig,750,370,150,120);
ctx.drawImage(images.boxBig,754,270,150,120);
ctx.drawImage(images.boxSmall,788,210,120,80);
<!-- For bombbottom -->
bombBottom = images.bomb;
timerBottom = images.timer;
ctx.drawImage(bombBottom,newCanvas.width/2-newCanvas.width/8,newCanvas.height-150,x1,y1);
ctx.drawImage(timerBottom,newCanvas.width/2+newCanvas.width/10000,newCanvas.height-50,x2,y2);
ctx.font = "28pt Times New Roman";
ctx.fillStyle = "yellow";
ctx.fillText("Player 1", 720, 635);
ctx.font = "20pt Times New Roman";
ctx.fillStyle = "yellow";
ctx.fillText("? - 6 = 11", 730, 670);
<!-- For bombleft-->
bombLeft = images.bomb;
timerLeft = images.timer;
ctx.save();
ctx.rotate(Math.PI / 2);
ctx.drawImage(bombLeft,230,-newCanvas.height/4,x1,y1);
ctx.drawImage(timerLeft,400,-newCanvas.height/13,x2,y2);
ctx.restore();
<!-- For bombtop-->
bombTop = images.bomb;
timerTop = images.timer;
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI);
ctx.drawImage(bombTop,-650,-50,x1,y1);
ctx.drawImage(timerTop,-480,50,x2,y2);
ctx.restore();
<!-- For bombright-->
bombRight = images.bomb;
timerRight = images.timer;
ctx.save();
ctx.translate(100, 100);
ctx.rotate(-Math.PI/2);
ctx.drawImage(bombRight,-325,1100,x1,y1);
ctx.drawImage(timerRight,-150,1215,x2,y2);
ctx.restore();
<!-- TO draw random circles -->
for(var i = 0; i < 30;i++)
{
numberCircles[i] = new Kinetic.Image({
image : images.numberCircle,
x : Math.floor(Math.random()* newCanvas.width),
y : Math.floor(Math.random()*newCanvas.height),
width : 50,
height : 50,
draggable : true,
stroke : 'red',
strokeWidth : 10,
strokeEnabled : false
/*if((x > newCanvas.width/8 && x < newCanvas.width-newCanvas.width/6)&&(y > newCanvas.height/4 && y < newCanvas.height-newCanvas.height/3))
{
ctx.drawImage(numberCircles[i],x,y,50,50);
}
else
{
i = i-1;
continue;
}*/
});
layer.add(numberCircles[i]);
stage.add(layer);
}
// use event delegation to update pointer style
// and apply borders
layer.on('mouseover', function(evt) {
//var shape = evt.shape;
document.body.style.cursor = 'pointer';
//shape.enableStroke();
layer.draw();
});
layer.on('mouseout', function(evt) {
//var shape = evt.shape;
document.body.style.cursor = 'default';
//shape.disableStroke();
layer.draw();
});
});
}
loadImages(sources,initStage);
});
</script>
</body>
</html>