Canvas javascript drawImage method

结果：它不会将图像加载到画布中。我得到了白色矩形，知道为什么吗？我想我可以直接从变量中调用draw方法，比如：bg.draw，或者这是否意味着我需要在画布上重新绘制图像并重新运行bg.draw？

const cvs = document.getElementById("firstplatform");
const ctx = cvs.getContext("2d");
// GAME VARS AND CONSTS
let frames = 0;
// LOAD IMAGE
const sprite = new Image();
sprite.src = "img/sprite.png";
//BACKGROUND
const bg = {
sX: 0,
sY: 0,
w: 275,
h: 226,
x: 0,
y: cvs.height - 226,

draw: function () {
ctx.drawImage(
sprite,
this.sX,
this.sY,
this.w,
this.h,
this.x,
this.y,
this.w,
this.h
);
ctx.drawImage(
sprite,
this.sX,
this.sY,
this.w,
this.h,
this.x + this.w,
this.y,
this.w,
this.h
);
},
};
// DRAW
bg.draw();`

以下是index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Game</title>
<link href="https://fonts.googleapis.com/css?family=Teko:700" rel="stylesheet">
<style>        
canvas{
border: 1px solid #000;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="firstplatform" width="320" height="480"></canvas>

<script src="game.js"></script>
</body>
</html>

您需要等待图像加载后才能将其绘制到画布上。因此，将bg.draw封装在onload处理程序中：

sprite.onload = function()
{
bg.draw();
}

const cvs = document.getElementById("firstplatform");
const ctx = cvs.getContext("2d");
// GAME VARS AND CONSTS
let frames = 0;
// LOAD IMAGE
const sprite = new Image();
sprite.src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27";
//BACKGROUND
const bg = {
sX: 0,
sY: 0,
w: 275,
h: 226,
x: 0,
y: cvs.height - 226,
draw: function () {
ctx.drawImage(
sprite,
this.sX,
this.sY,
this.w,
this.h,
this.x,
this.y,
this.w,
this.h
);
ctx.drawImage(
sprite,
this.sX,
this.sY,
this.w,
this.h,
this.x + this.w,
this.y,
this.w,
this.h
);
},
};
sprite.onload = function()
{
bg.draw();
}

<canvas id="firstplatform" width="320" height="480"></canvas>

相关内容

最新更新

热门标签：