HTML5 Canvas - 如何在画布上的图像上绘制矩形 [英] HTML5 Canvas - How to draw rectangle over image in canvas
问题描述
其实，我可以使用 img.onload 函数。我从 HTML5画布 - 如何在图像背景上绘制线条？。但我需要绘制图像，而不使用 img 从 onload 函数，如下所示：
var imagePaper = new Image（）;
imagePaper.onload = function（）{
context.drawImage（imagePaper，100，20，500,500）;
};
imagePaper.src =images / main_timerand3papers.png;但是我想能够在canvas上绘制矩形，只需在canvas上面附加img src即可。正如： < body>
< img id =screamsrc =my.jpgalt =尖叫声width =220height =277>
< p>画布：< / p>
< canvas id =myCanvaswidth =500height =500>
您的浏览器不支持HTML5 canvas标签。< / canvas>
但是我无法在canvas上绘制线条，img是图形或形状隐藏背后。这是我的完整代码：
<！DOCTYPE html>
< head>
< title>在HTML5画布上播放YouTube视频< / title>
< meta name =viewportcontent =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 =screamsrc =my.jpgalt =尖叫声width =220height =277>
< p>画布：< / p>
< canvas id =myCanvaswidth =500height =500>
您的浏览器不支持HTML5 canvas标签。< / 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>
解决方案因为您不等待图片先载入。在脚本中添加 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>
发生的是尝试在加载之前绘制图像，执行 window.onload 将在整个文档加载后调用代码（例如图像）。否则，它可能不显示图像或绘制出来。
Actually, I am able to do it using img.onload function. Something I got from 'HTML5 Canvas - How to Draw a line over an image background?'. But I need to draw image without using img from onload function which is like this:
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:
<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:
<!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>
解决方案 Because you are not waiting for the image to load first. In your script add an 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.onload will call the code once the entire document is loaded (such as images). Otherwise it may display no image or draw it out of line.
这篇关于HTML5 Canvas - 如何在画布上的图像上绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
