캔버스에서 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"과 같습니다. 그래서 나는 무엇이 잘못되었는지를 모른다. 누구든지 도울 수 있니? 감사!

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

를하지만 여전히 작동하지 않습니다 : 내가 jQuery를 사용 후 초기화 코드를 변경 아래

덕분에 대해 언급한다.

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

이 코드 메이트를 사용해보십시오. 간단한 div에서 canvas_height, width 및 color의 값을 바꾸면 원하는 출력을 얻을 수 있습니다. 당신은 .css() 나누었다 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]; 
}