JavaScript onClick change image in canvas совместимость

Я делаю некоторый КОД для изменения изображений в CANVAS при выборе элемента из списка dropDown. Он работает как в IE, но в Chrome и FireFox, когда я выбрал элемент из списка DropDown, ничего не произошло, пока я снова не перейду на список DropDown. Вот link to sample: Вот КОД:JavaScript onClick change image in canvas совместимость

<html> 
<head> 
<style> 
    body{ margin:40px; background:#666; } 
    #my_canvas{ background:#FFF; border:#000 1px solid; } 
</style> 
<script> 
    var text = ""; 
    var i; 
    var slika01 = new Image(); 
    var slika02 = new Image(); 
    var slika03 = new Image(); 
    slika01.src = "images/sloj01_01.png"; 
    slika02.src = "images/sloj02_01.png"; 
    slika03.src = "images/sloj03_01.png"; 

function clear(){ 
    var ctx = document.getElementById('my_canvas').getContext('2d'); 
    ctx.clearRect(0, 0, 500, 300); 
} 
function draw(){ 
    var ctx = document.getElementById('my_canvas').getContext('2d'); 
    //ctx.clearRect(0, 0, 500, 300); 
    ctx.drawImage(slika01, 0, 0, 500, 300); // Positioning, sizing 
    ctx.drawImage(slika02, 0, 0, 500, 300); // Positioning, sizing 
    ctx.drawImage(slika03, 0, 0, 500, 300); // Positioning, sizing 
} 
function osvezi01(vrednost){ 
     slika01.src = "images/sloj01_0" + vrednost + ".png"; 
     clear(); 
     draw(); 
    } 
function osvezi02(vrednost){ 
     slika02.src = "images/sloj02_0" + vrednost + ".png"; 
     clear(); 
     draw(); 
    } 
function osvezi03(vrednost){ 
     slika03.src = "images/sloj03_0" + vrednost + ".png"; 
     clear(); 
     draw(); 
    } 

window.onload = draw; 
</script> 
</head> 
<body> 
<canvas id="my_canvas" width="500" height="300"></canvas> 
<p> 
<label for="slikai01">slikai 1. sloja</label> 
<select name="slikai01" id="slikai01" onClick="osvezi01(this.value);"> 
<script> 
    text = ""; 
    for (i = 1; i<=5; i++){ 
     text += '<option value="' + i + '">' + i + '</option>'; 
    } 
    document.getElementById("slikai01").innerHTML = text; 
</script> 
</select> 
<label for="slikai02"> | slikai 2. sloja</label> 
<select name="slikai02" id="slikai02" onClick="osvezi02(this.value);"> 
<script> 
    text = ""; 
    for (i = 1; i<=5; i++){ 
     text += '<option value="' + i + '">' + i + '</option>'; 
    } 
    document.getElementById("slikai02").innerHTML = text; 
</script> 
</select> 
<label for="slikai03"> | slikai 3. sloja</label> 
<select name="slikai03" id="slikai03" onClick="osvezi03(this.value);"> 
<script> 
    text = ""; 
    for (i = 1; i<=5; i++){ 
     text += '<option value="' + i + '">' + i + '</option>'; 
    } 
    document.getElementById("slikai03").innerHTML = text; 
</script> 
</select> 
</p> 
</body> 
</html>

источник

2015-12-28 Pedja Ivanovic

~~Вы можете попробовать использовать onchange событие вместо onClick события для вашего выпадающих.~~

Я перестроил среду локально, и она работает для меня. Я тестировал его со ссылками на ваши изображения на вашем сервере, поэтому я думаю, что предварительная загрузка работает.

Я сделал то, что я изменил onClick на событие onchange и добавил предварительную загрузку всех изображений.

Я также разделил исходный код на три разных файла и объединил три функции выпадающего события в одну функцию и добавил параметр. Но эти два изменения не нужны для решения проблемы. Достаточно первых двух изменений.

Вот исходный код:

index.html

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
    <script src="script.js"></script> 
</head> 
<body> 
<canvas id="my_canvas" width="500" height="300"></canvas> 
<p> 
<label for="slikai01">slikai 1. sloja</label> 
<select name="slikai01" id="slikai01" onchange="redraw(this.value, 1);"> 
    <script> 
     text = ""; 
     for (i = 1; i<=5; i++){ 
      text += '<option value="' + i + '">' + i + '</option>'; 
     } 
     document.getElementById("slikai01").innerHTML = text; 
    </script> 
</select> 
<label for="slikai02"> | slikai 2. sloja</label> 
<select name="slikai02" id="slikai02" onchange="redraw(this.value, 2);"> 
    <script> 
     text = ""; 
     for (i = 1; i<=5; i++){ 
      text += '<option value="' + i + '">' + i + '</option>'; 
     } 
     document.getElementById("slikai02").innerHTML = text; 
    </script> 
</select> 
<label for="slikai03"> | slikai 3. sloja</label> 
<select name="slikai03" id="slikai03" onchange="redraw(this.value, 3);"> 
    <script> 
     text = ""; 
     for (i = 1; i<=5; i++){ 
      text += '<option value="' + i + '">' + i + '</option>'; 
     } 
     document.getElementById("slikai03").innerHTML = text; 
    </script> 
</select> 
</p> 
</body>

style.css

body { 
    margin:40px; 
    background:#666; 
} 

#my_canvas { 
    background:#FFF; 
    border:#000 1px solid; 
}

script.js

new Image().src = "images/sloj01_01.png"; 
new Image().src = "images/sloj01_02.png"; 
new Image().src = "images/sloj01_03.png"; 
new Image().src = "images/sloj01_04.png"; 
new Image().src = "images/sloj01_05.png"; 

new Image().src = "images/sloj02_01.png"; 
new Image().src = "images/sloj02_02.png"; 
new Image().src = "images/sloj02_03.png"; 
new Image().src = "images/sloj02_04.png"; 
new Image().src = "images/sloj02_05.png"; 

new Image().src = "images/sloj03_01.png"; 
new Image().src = "images/sloj03_02.png"; 
new Image().src = "images/sloj03_03.png"; 
new Image().src = "images/sloj03_04.png"; 
new Image().src = "images/sloj03_05.png"; 

var slika01 = new Image(); 
slika01.src = "images/sloj01_01.png"; 
var slika02 = new Image(); 
slika02.src = "images/sloj02_01.png"; 
var slika03 = new Image(); 
slika03.src = "images/sloj03_01.png"; 

function clear() { 
    var ctx = document.getElementById('my_canvas').getContext('2d'); 
    ctx.clearRect(0, 0, 500, 300); 
} 

function draw(){ 
    var ctx = document.getElementById('my_canvas').getContext('2d'); 
    //ctx.clearRect(0, 0, 500, 300); 
    ctx.drawImage(slika01, 0, 0, 500, 300); // Positioning, sizing 
    ctx.drawImage(slika02, 0, 0, 500, 300); // Positioning, sizing 
    ctx.drawImage(slika03, 0, 0, 500, 300); // Positioning, sizing 
} 

function redraw(vrednost, num){ 
    switch(num) { 
     case 1: 
      slika01.src = "images/sloj01_0" + vrednost + ".png"; 
      break; 
     case 2: 
      slika02.src = "images/sloj02_0" + vrednost + ".png"; 
      break; 
     case 3: 
      slika03.src = "images/sloj03_0" + vrednost + ".png"; 
      break; 
    } 
    clear(); 
    draw(); 
} 

window.onload = draw;

источник

2015-12-28 20:28:14

Я стараюсь, что первое, но я получил худшие результаты, чем с OnClick в Google Chrome и FireFox браузеров. Я делаю clear() функцию для решения этой проблемы, но безуспешно. Открытая ссылка, которую я публикую, чтобы увидеть эту проблему in vivo. –

Думаю, я что-то понял. Также я не думаю, что это кросс-браузерная проблема. Просто нажмите каждый элемент в раскрывающемся меню один раз. После нажатия на них все больше не возникает проблем при повторном нажатии на них. Я думаю, что проблема в том, что изображения нужно немного загружать. –

Вы ошибаетесь - в IE это работает как шарм - когда я выбрал элемент из меню DropDown, он мгновенно меняет образ, но в Chrome и FireFox мне нужно дважды щелкнуть меню dropDown, чтобы изменить изображение в холсте. –

JavaScript onClick change image in canvas совместимость

ответ

Смежные вопросы