简单的 HTML5 画布图像不显示 [英] simple HTML5 canvas image not displaying
问题描述
我是新手 - 我就是不明白为什么这不起作用.当我从 HTML 中删除 Display:none 时，图像工作正常，所以我知道图像的路径是正确的.但它不是在画布上绘制.感谢您抽出宝贵时间.
I'm new to this - I just can't figure out why this isn't working. When I remove Display:none from HTML, the image works correctly so I know the path to the image is correct. But it's not drawing on the canvas. Thanks for your time.
HTML:
<canvas width="840" height="900" id="Canvas6">
Your browser does not support this feature.
</canvas>
<img src="image/logo.png" id="img1" width="825" height="272" style="display:none;">
<script type="text/javascript" src="js/main.js"></script>
Main.JS JAVASCRIPT:
Main.JS JAVASCRIPT:
var theCanvas = document.getElementById('Canvas6');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
//Create a variable to hold our image
var srcImg = document.getElementById("img1");
//Draw an image directly onto the canvas
ctx.drawImage(srcImg, 0,0);
//Draw a scaled down image
//drawImage(srcImg, dx, dy, dw, dh)
}
}
推荐答案
在 html 文件中，您所做的第一件事就是在 html 文件的末尾使用 'script' 标签.这确保了关键渲染时间"最小化，并且首先显示 HTML 中的显示项.(对这种情况影响不大，因为在这里您使用的是 JS 来绘制/显示，但是当您将 js 用于其他目的(例如计算等)并且您不想停止其他目的时，这种方法非常好由于正在进行的计算而显示的 HTML 项目.)
In html file, the first best thing you have done is used the 'script' tag right at the end of the html file. This ensures that the "Critical Render Time" is minimized, and the display items in HTML are shown first. (Not a huge impact on this case, because here you are using the JS to draw/display, but this approach is really good when you use your js for other purposes like calculations etc., and you don't want to stop the other HTML items from displaying because of an ongoing calculation.)
现在画布已经准备好了，是时候将图像扔到画布上了.
Now that the canvas is ready, its time to throw the image on the canvas.
尝试使用边框属性(style="border: 2px dotted black")查看画布的容器区域.
Try using the border property (style="border: 2px dotted black") to see the container area of the canvas.
嗯！！但是图像没有显示在画布中.为什么??
Hmmm !! But the image doesn't show in canvas. WHY ??
图像(或任何其他文件)至少需要一些时间来处理.当它们被处理加载到屏幕上时，你的画布已经被显示出来了.因此你会看到一个空的画布.
Images(or any other files) take atleast some time to get processed. By the time they are getting processed to be loaded on the screen, your canvas is already getting displayed. Hence you see an empty canvas.
因此，解决方案是让其他一切都等待，直到图像加载完毕.
So, the solution is to make everything else wait, till the time image gets loaded.
我们怎么做?只需使用事件监听器".
How do we do that ? Just use the "Event Listener".
EventListener 是 Window 对象的属性.(window.addEventListener("load", some_func_to_run , false);).当我们希望我们的窗口/页面/浏览器等待某些东西时，我们通常会使用它，但是嘿，我们也可以将它用于我们的图像.
EventListener is the property of Window object. (window.addEventListener("load", some_func_to_run , false);). We generally use this, when we want our window/page/browser to wait for something, but hey , we can use it for our images as well.
var cvs = document.getElementById("canvas"); // Getting the control of the canvas
var ctx = cvs.getContext("2d"); //Getting the control of the useful HTML object getContext . This object brings in a lot of useful methods like drawImage, fillRect etc.
//create images
var bg = new Image(); // Creating image objects
bg.src = "images/bg.png"; //Setting the source file
//create images ends
//load images first
bg.addEventListener("load" , draw , false); //**IMPORTANT : Just remove this line and you will start facing this problem of empty canvas again
//loading images ends
function draw() {
ctx.drawImage(bg,0,0); // Putting the image and its coordinates on the canvas
}
draw(); // Calling the draw function to put the image on canvas<html>
<body>
<canvas id="canvas" width="288" height="512" style="border: 2px dotted black"> </canvas>
<script src="flappyBird.js"></script>
</body>
</html>所以，这一切都是关于使用事件侦听器并要求一切等待图像加载完毕.
So, it all about using Event Listener and asking everything to wait till the image gets loaded.
希望对您有所帮助.:)
Hope this help. :)
这篇关于简单的 HTML5 画布图像不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
