Canvas 图像未加载到画布上

我的问题是在将本地托管的图像加载到画布时遇到问题。我曾尝试在web服务器上使用XAMPP托管代码，并在本地托管代码，LightBlue.jpg图像似乎从未加载。然而，当我使用来自网站的外部图像时，代码可以完美地工作。我在下面提供了一个例子

HTML:

您的浏览器不支持HTML5画布标记。

JAVASCRIPT:

var canvas=document.getElementById（'Section1Canvas'），
context=canvas.getContext（'2d'）；
使_基（）；
函数make_base（）
{
基本图像=新图像（）；
base_image.onload=函数（）
{
drawImage（基本图像，10,10）；
}
base_image.src='images\Selection\Bag\Section1\LightBlue.jpg'；
}

脚本显示在代码中结束HTML标记的正上方。我已经托管了我的Web服务器上的所有信息，但图像仍然拒绝加载。如果我使用外部图像将代码更改为以下内容，画布将完美地加载图像：

var canvas=document.getElementById（'Section1Canvas'），
context=canvas.getContext（'2d'）；
使_基（）；
函数make_base（）
{
基本图像=新图像（）；
base_image.onload=函数（）
{
drawImage（基本图像，10,10）；
}
base_image.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

---

任何指导都将不胜感激

你离得太近了

您需要在

base\u image.src

之后放置

base\u image.onload

功能：

<script>
    var canvas  = document.getElementById('Section1Canvas'),
        context = canvas.getContext('2d');
    make_base();

    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
           // test that the image was loaded
           alert(base_image);  // or console.log if you prefer
           context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
    }
</script>

var canvas=document.getElementById（'Section1Canvas'），
context=canvas.getContext（'2d'）；
使_基（）；
函数make_base（）
{
基本图像=新图像（）；
base_image.onload=函数（）
{
//测试图像是否已加载
alert（base_image）；//或console.log，如果您愿意
drawImage（基本图像，10,10）；
}
base_image.src='images\Selection\Bag\Section1\LightBlue.jpg'；
}

函数（）中缺少一个}。您打开了它，但忘记关闭。

阻止XAMPP处理画布脚本的一个功能是

mod_rewrite

。显然，这是一个简单的修复方法。这就是。。 1:
使用您喜爱的文本编辑器打开apache的配置文件。配置文件通常位于：{apache_dir}/conf/httpd.conf 如果您使用的是XAMPP或WAMP包，那么您将在以下位置找到该文件：{XAMPP_dir}/apache/conf/httpd.conf {wamp_dir}/apache/conf/httpd.conf
2:
搜索以下字符串：#LoadModule rewrite_module modules/mod_rewrite.so并取消注释（删除“#”符号）。
3:
现在搜索另一个字符串AllowOverride None并用AllowOverride All替换它
4:
最后保存更改，关闭文本编辑器并重新启动apache服务器

---

这应该将您的localhost设置为正确的参数。

对我来说，将src放在后面会使事情变得更糟。。事情是这样的——在我的例子中，每25毫秒更新一次。首先是两个打捆针（未显示），然后是打捆针上的这个小圆盖

针头每次都绝对有效-顶部在合适时出现

  ctx.save();
  ctx.beginPath();
  ctx.translate(cX, cY);
  if (centre.complete) ctx.drawImage(centre, kn1, kn2, kn3, kn4); 
  else centre.onload = function () { ctx.drawImage(centre, kn1, kn2, kn3, kn4); } 
  ctx.restore();

---

缩进很糟糕，但是}在那里。该问题已被编辑，以放入所选答案建议的修复中。在base_image.onload中，您应该使用此选项而不是base_image，否则它将引用最后一个调用的选项。

  ctx.save();
  ctx.beginPath();
  ctx.translate(cX, cY);
  if (centre.complete) ctx.drawImage(centre, kn1, kn2, kn3, kn4); 
  else centre.onload = function () { ctx.drawImage(centre, kn1, kn2, kn3, kn4); } 
  ctx.restore();