javascript - 在 Canvas 中使用 jQuery 不起作用？

Question

我正在尝试使用 jQuery 将图片放在 Canvas 的中心。首先我没有使用 jQuery:

function initCanvas() {
    var canvas = document.getElementById("canvas");
    canvas.height = CANVAS_HEIGHT;
    canvas.width = CANVAS_WIDTH;
    canvas.style.backgroundColor = CANVAS_COLOR; // black color
    return canvas;
}

function drawEarth(ctx) {
    var img = new Image();
    img.src = EARTH_PNG;
    img.addEventListener("load", function () {
        ctx.drawImage(img, CANVAS_X - EARTH_X, CANVAS_Y - EARTH_Y, EARTH_WIDTH,     EARTH_HEIGHT);
    });
}

function render() {
    var canvas = initCanvas();
    var ctx = canvas.getContext("2d");
    drawEarth(ctx);
}

// init function
(function () {
    render();
})();

并且成功了。然后我修改了initCanvas()功能:

function initCanvas(){
    var canvas = $("#canvas");
    canvas.height(CANVAS_HEIGHT);
    canvas.width(CANVAS_WIDTH);
    canvas.css({"background-color": CANVAS_COLOR}); // black color
    return canvas[0];
}

它没有画图。不过背景是黑色的。我检查document它说例如，$( "#mydiv" ).css( "color", "green" )相当于 document.getElementById( "mydiv" ).style.color = "green" .所以我不知道这里出了什么问题。有人可以帮忙吗？谢谢!

感谢下面的评论，我在使用 jQuery 后更改了初始化代码:

$(function (){
    render();
});

但它仍然不起作用。

Answer 1

你不能通过 .css() 来处理 Canvas 宽度/高度。但是 context.canvas.width/height 正在使用 jquery 。你应该稍微改变一下initCanvas 和 render 函数。

function render() {
    var canvas = initCanvas();    
    drawEarth(canvas);
}

function initCanvas() {
    var c = $("#canvas");
    var ctx = c[0].getContext("2d");
    ctx.canvas.height = CANVAS_HEIGHT;
    ctx.canvas.width = CANVAS_WIDTH;
    c.css({"background-color": CANVAS_COLOR}); // black color
    return ctx;
}