我的问题是,我在将本地托管的图像加载到画布上时遇到问题。我尝试过使用 XAMPP 在本地将代码托管在 Web 服务器上,但 LightBlue.jpg 图像似乎永远无法加载。但是,当我使用网站上的外部图像时,代码可以完美运行。我在下面提供了一个例子。
HTML:
<canvas id="Section1Canvas" width="500" height="95" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
JavaScript:
<script>
var canvas = document.getElementById('Section1Canvas'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.onload = function()
{
context.drawImage(base_image, 10, 10);
}
base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
}
</script>
该脚本出现在我的代码中结束 HTML 标记的上方。我已经托管了我的网络服务器的所有信息,但图像仍然拒绝加载。如果我使用外部图像将代码更改为以下内容,画布将完美加载图像:
<script>
var canvas = document.getElementById('Section1Canvas'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.onload = function()
{
context.drawImage(base_image, 10, 10);
}
base_image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}
</script>
任何指导将不胜感激。
你们离得太近了!
你需要把base_image.src
after the base_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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)