在Canvas中使用jQuery不起作用？

我試圖把一張圖片放在使用jQuery的畫布中央。首先我沒有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(); 
});

，但它仍然沒有工作。

來源

2016-06-22 user3928256

每自己的評論，是不是你的CSS功能的使用錯了嗎？ –

我可以將它與一個對象或2個參數一起使用。我嘗試了兩種，但都沒有工作。 – user3928256

哦，沒有看到在文檔中，並沒有在一段時間內使用jquery，它只是跳出來對我。這個代碼在控制檯上的任何錯誤？ –

您不能.css()。但context.canvas.width/height做畫布寬度/高度使用jQuery。你應該改變一點點initCanvas和渲染功能。

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

來源

2016-06-22 04:59:58

嘗試此代碼mate。如果嘗試通過替換簡單div上的canvas_height，寬度和顏色的值，您將獲得所需的輸出。

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

來源

2016-06-22 04:05:07

感謝隊友，但它不工作。 – user3928256

在Canvas中使用jQuery不起作用？

回答

相關問題