將CSS圖像放入javascript中

Question

我希望我的CSS圖像通過ID在JavaScript中使用。

CSS代碼：

#backImage {
    background-image: url("img/level1.jpg");
    background-repeat: repeat-y;
    }

JavaScript代碼：

//Uploading obstacle car
var obstcar = new Image();
obstcar.src = $("#backImage").css;

問我任何問題，我會立即回答。

這就是我畫背景的方式：

context.drawImage(obstcar, -(obstcar.width / 2), -(obstcar.height / 2));

Answer 1

我認為最好按類別選擇並將該類別添加到圖像中

.backImage {
    background-image: url("img/level1.jpg");
    background-repeat: repeat-y;
    }

JavaScript代碼：

var obstcar = $("<image>").addClass('backImage')

盡管考慮了一下，但我不太確定為什么<img>元素會具有背景圖像？

也許

var obstcar = $("<div>").addClass('backImage')

會更好

編輯

按照您的評論：

要創建畫布，您需要一個帶有source屬性作為圖像的圖像對象

因此，讓我們制作一個臨時元素並為其分配css類

var tmp= $("<div>").addClass('backImage')

然后獲取圖像源：

var src = tmp.css('background-image');

創建圖像元素

var obstcar = new Image();
obstcar.src = src

獲取上下文

var canvas=$("#myCanvas");
var ctx=canavas.getContext("2d");

畫畫布

ctx.drawImage(obstcar, -(obstcar.width / 2), -(obstcar.height / 2));