将图像绘制到画布上

draw image to canvas proplem

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

非常困惑的是，我正在设计一个2d游戏，并使用此代码绘制图像来画布警报方法返回背景。x=0！但当我把x改为z或任何字母时，它会返回数字400i！为什么background.x总是等于零？？？

var canvas = document.getElementById('game'); 
var context = canvas.getContext('2d');
function loadResources(){
background = new Image();
background.src = "11.jpg";
background.width = 128;
background.height = 128;
background.x = 400;
background.y = 450;
}
function drawimage(){
alert(background.x);
context.drawImage(background,background.x,background.y,background.width,background.height);
}
function gameLoop() {
drawimage();
}

loadResources();
setInterval(gameLoop, 1000/60);

与其他对象不同，您实际上无法设置不属于它的Image对象的属性。正如您所看到的，当您在设置它们之后尝试访问它们时，这些属性将不可用。您可以按照以下方式稍微修改代码，以获得您想要的行为：

var canvas = document.getElementById('game'); 
var context = canvas.getContext('2d');
var resources = {};
function loadResources(){
    resources.background = new Image();
    resources.background.src = "11.jpg";
    resources.background.width = 128;
    resources.background.height = 128;
    resources.backgroundx = 400;
    resources.backgroundy = 450;
}
function drawimage(){
    console.log(resources.backgroundx);
    context.drawImage(resources.background,resources.backgroundx,resources.backgroundy,resources.background.width,resources.background.height);
}
function gameLoop() {
    drawimage();
}

loadResources();
setInterval(gameLoop, 1000/60);
相关文章：