JavaScript onClick 更改图像 canvas 兼容性

Question

我编写了一些代码来更改 CANVAS 中从下拉列表中选择项目时的图像。它在 IE 中正常工作，但在 Chrome 和 FireFox 中，当我从下拉列表中选择项目时，没有任何反应，直到我再次单击下拉列表。这是 link to sample：这是代码：

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

Answer 1

~~您可以尝试对下拉菜单使用 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;

JavaScript onClick 更改图像 canvas 兼容性

JavaScript onClick change image in canvas compatibility

html

javascript

canvas

cross-browser

onclick