Question

我已经尝试了无数次让我的背景出现在javascript中，因为我希望有人能够帮助粉碎它为什么它不会加载任何东西。

我今天编辑和改变了无数次，仍然无法使其发挥作用。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");


ctx.height = 512;
ctx.width = 480;
document.body.appendChild(canvas);

// Game Loop

var Time;
function gameLoop() {
    var now = date.now();
    var dateTime = (now - time) / 1000.0;

    update(dateTime);
    render();

    time = now;
    requestAnimationFrame(gameLoop);
}

// image call
function backgroundDraw() {
    backgroundImg = new image;
    backgroundImg.src = 'images/background.png'
    backgroundImg.onload = function () {
        ctx.drawImage(backgroundImg, 100, 100);
    }
}
backgroundDraw();

我是javascript的新手，我正在寻找的指南是http://jlongster.com/Making-Sprite-based-Games-with-Canvas和http://www.w3schools.com/tags/canvas_drawimage.asp

任何帮助真的会受到赞赏！

Answer 1

第一个问题是设置画布的尺寸。使用canvas元素设置其宽度和高度。

更改此

ctx.height = 512;
ctx.width = 480;

到这个

canvas.height = 512;
canvas.width = 480;

您的图片实例化有拼写错误，更改

backgroundImg = new image;

到

backgroundImg = new Image;

你可以检查这个工作demo的小提琴。

Answer 2

var canvas = document.createElement("canvas");
canvas.style.width = "480px"; // missing width
canvas.style.height = "512px"; // missing height
var ctx = canvas.getContext("2d");

ctx.height = 512;
ctx.width = 480;
document.body.appendChild(canvas);

// Game Loop

var Time;
function gameLoop() {
    var now = Date.now();
    var dateTime = (now - time) / 1000.0;

    update(dateTime);
    render();

    time = now;
    requestAnimationFrame(gameLoop);
}

// image call
function backgroundDraw() {
    backgroundImg = new Image; // construct typo
    backgroundImg.src = 'http://www.artisticadigital.com/wp-content/uploads/cache/2014/02/HTML5_Logo_512/14550496.png'
    backgroundImg.onload = function () {
        ctx.drawImage(backgroundImg, 100, 100);
    }
}
backgroundDraw();

我不明白你想做什么

Answer 3

有几件事。 gameLoop函数中的第一个var Time !== time。此外，您还需要在image元素上设置src之前定义onload函数。 new image需要将图片大写：new Image。现在我要注释你的gameLoop，因为你只是想显示图像。这样做并将图像更改为图像就可以为我渲染图像。

画布不适用于基本图像绘制

3 个答案: