キャンバスでjQueryを使用できない？

Question

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]; 
} 

画像を描画しませんでした。しかし、背景は黒でした。私はdocumentを確認します。たとえば、$("#mydiv").css("color", "green")はdocument.getElementById("mydiv").style.color = "green"に相当します。ここで何が間違っているのか分かりません。誰でも助けることができますか？ありがとう！私の下にコメントする

おかげでjQueryのを使用した後の初期化コードを変更：

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

をそれはまだ働いていません。

Answer 1

は。あなたが少しinitCanvasを変更し、機能をレンダリングする必要がありますjQueryを使って作業しています。

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; 
} 

Answer 2

このコードメイトを試してください。 canvas_height、width、colorの値を単純なdivに置き換えると、望ましい出力が得られます。あなたは.css() .But context.canvas.width/heightでキャンバスの幅/高さを行うことはできません

function initCanvas(){ 
$('#abc').css('width',CANVAS_HEIGHT); 
$('#abc').css('height',CANVAS_WIDTH); 
$('#abc').css('background-color',CANVAS_COLOR); 
return canvas[0]; 
}