Question

我目前正在创建或至少尝试创建一个非常简单的canvas元素。您应该可以选择2个图像中的1个。当您单击两个图像中的一个时，它应该出现在画布中？但我不能让它发挥作用？

我确信图像的名称是正确的。

有没有人能帮助我？

<script>
var canvas = document.getElementById("mijnCanvas");
var context = canvas.getContext("2d");
var welkBestek = document.getElementById("fotos");

var tafelkleedKleur="#ff0000"; 
function tekenAlles(){
            context.beginPath();
            context.rect(0,0,canvas.width,canvas.height);

            //bord
            context.drawImage(bordPlaatje,0,25);

            //bestek
            if(welkBestek == "mesvork") {
                context.drawImage(mesvorkPlaatje,0,25);
            }
            else if (welkBestek == "stokjes") {
                context.drawImage(stokjesPlaatje,0,25);
            }
}

window.onload = function() {
tekenAlles();
}

function verander() {
    tafelkleedKleur = document.getElementById("tafelkleed").value;
    tekenAlles();
}

var bordPlaatje = new Image(); 
bordPlaatje.src='bord.png';

var mesvorkPlaatje = new Image(); 
mesvorkPlaatje.src='img/afbeelding1.jpg';

var stokjesPlaatje = new Image(); 
stokjesPlaatje.src='img/afbeelding2.jpg';
</script>
</div>
<div class="footer">
</div>

Answer 1

根据您的代码示例，脚本正在查找与HTML位于同一文件夹中的图像bord.jpg

var bordPlaatje = new Image(); 
bordPlaatje.src='bord.png';

虽然mesvorkPlaatje＆amp; stokjesPlaatje引用为子文件夹。

var mesvorkPlaatje = new Image(); 
mesvorkPlaatje.src='img/afbeelding1.jpg';

var stokjesPlaatje = new Image(); 
stokjesPlaatje.src='img/afbeelding2.jpg';

你有一个子文件夹img /？有可用的图像吗？

ps：尝试在你的代码中使用英语，我在启动时犯了同样的错误，虽然它对你来说是合乎逻辑的，并不意味着对你的代码工作的其他人来说是合乎逻辑的。 < / p>

图片没有出现在画布上

1 个答案: