Ссылка на изображения с CSS на Javascript

Question

Я хочу связать изображение с CSS на Javascript, но мой код не работает.

CSS:

.backImage { 

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

} 

Javascript Код:

var x1 = 450; 
var y1 = 40; 
var speed1 = 5; 
var angle1 = 90; 
var mod1 = 1;   

var tmp= $("<div>").addClass('backImage'); 
var src = tmp.css('background-image').match(/[^"][^"]+/g)[1]; 

console.log(src); 

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

function drawBackground() { 

    x1 += (speed1 * mod1) * Math.cos(Math.PI/180 * angle1); 
    y1 += (speed1 * mod1) * Math.sin(Math.PI/180 * angle1); 

    context.save(); 
    context.translate(x1, y1); 
    context.rotate(Math.PI/180 * angle1); 
    context.drawImage(back, -(back.width/2), -(back.height/2)); 
    context.restore(); 

} 

Answer 1

Я предполагаю, что вы хотите, чтобы извлечь изображение из источника CSS background-image и нарисовать его на холсте. Вот как это делается.

var tmp = $("<div>").addClass('backImage'); 
 
var src = tmp.css('background-image').match(/[^"][^"]+/g)[1]; 
 
var canvas = document.getElementById('canvas') 
 
var context = canvas.getContext('2d'); 
 

 
console.log(src); 
 

 
var back = new Image(); 
 
back.src = src; 
 
back.onload = drawBackground; 
 

 
function drawBackground() { 
 
    canvas.width = back.width; 
 
    canvas.height = back.height; 
 
    context.drawImage(back, 0, 0); 
 
}

.backImage { 
 
    background-image: url("http://placehold.it/200/200"); 
 
    background-repeat: repeat-y; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="canvas"></canvas>