将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));