图像未出现在画布中答案

【问题标题】：Images not appearing in canvas图像未出现在画布中
【发布时间】：2013-05-22 03:37:46
【问题描述】：

我目前正在创建或至少尝试创建一个非常简单的画布元素。您应该可以选择从 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>

【问题讨论】：

这个答案表明很少或根本没有研究工作。请通过 jsfiddle 等在网络上创建一个工作示例，并尝试验证图像是否正确链接。
下一次，请不要将代码翻译成荷兰语。只有少数人懂荷兰语。总是用英文编码，这样你就可以分享代码，就像这里@SO...

标签： css html canvas

【解决方案1】：

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

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

虽然 mesvorkPlaatje 和 stokjesPlaatje 被引用为子文件夹。

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

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

你有一个子文件夹 img/ 吗？有图片吗？

ps：尝试在你的代码中使用英文，我在@start 也犯了同样的错误，虽然这对你来说是合乎逻辑的，但并不意味着它对其他人在处理你的代码也是合乎逻辑的。

【讨论】：