Javascript HTML5 Canvas - 如何在画布中的图像上绘制矩形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26902084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas - How to draw rectangle over image in canvas
提问by Rani dubey
Actually, I am able to do it using img.onloadfunction. Something I got from 'HTML5 Canvas - How to Draw a line over an image background?'. But I need to draw image without using imgfrom onloadfunction which is like this:
实际上，我可以使用img.onload函数来做到这一点。我从' HTML5 Canvas - 如何在图像背景上画一条线？'。但是我需要在不使用imgfromonload函数的情况下绘制图像，如下所示：
var imagePaper = new Image();
imagePaper.onload = function(){
context.drawImage(imagePaper,100, 20, 500,500);
};
imagePaper.src = "images/main_timerand3papers.png";
}
But I want to able draw rectangle over canvas simply attaching img src above canvas, just as:
但我希望能够在画布上绘制矩形，只需将 img src 附加在画布上方，就像：
<body>
<img id="scream" src="my.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.</canvas>
But I'm unable to draw line over img in canvas, either img is drawing or shape is hiding behind. This is my full code:
但我不能画在帆布IMG线，无论是IMG是借鉴或形状躲在后面。这是我的完整代码：
<!DOCTYPE html>
<head>
<title>Playing YouTube video on HTML5 canvas</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<img id="scream" src="my.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
回答by Spencer Wieczorek
Because you are not waiting for the image to load first. In your scriptadd an window.onload()
因为您不是在等待图像先加载。在你script添加一个window.onload()
<script>
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
}
</script>
What is happening is it's trying to draw the image before it loaded, doing window.onloadwill call the code once the entire document is loaded (such as images). Otherwise it may display no image or draw it out of line.
发生的事情是它试图在加载之前绘制图像，window.onload一旦加载整个文档（例如图像）就会调用代码。否则它可能不显示图像或将其绘制出线。
