在画布上使用jQuery无法正常工作？

user3928256 发表于 Dev

用户名

我正在尝试使用jQuery将图片放在画布的中央。首先，我没有使用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];
}

它没有画画。虽然背景是黑色的。我检查了它说的文档，例如，$( "#mydiv" ).css( "color", "green" )等效于document.getElementById( "mydiv" ).style.color = "green"。所以我不知道这是怎么回事。有人可以帮忙吗？谢谢！

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

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

但仍然无法正常工作。

大卫·贾·潘（David Jaw Hpan）

您不能通过执行画布的宽度/高度.css()。但是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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。