HTML5 Canvas - 如何在画布中的图像上绘制矩形
Posted
技术标签:
【中文标题】HTML5 Canvas - 如何在画布中的图像上绘制矩形【英文标题】：HTML5 Canvas - How to draw rectangle over image in canvas 【发布时间】：2015-01-10 04:43:56 【问题描述】：实际上，我可以使用img.onload 函数来做到这一点。我从'html5 Canvas - How to Draw a line over an image background?'得到的东西。但我需要在不使用 img 的 onload 函数的情况下绘制图像，如下所示：
var imagePaper = new Image();
imagePaper.onload = function()
context.drawImage(imagePaper,100, 20, 500,500);
;
imagePaper.src = "images/main_timerand3papers.png";
但我希望能够在画布上绘制矩形，只需将 img src 附加到画布上方，就像：
<body>
<img id="scream" src="my.jpg" >
<p>Canvas:</p>
<canvas id="myCanvas" >
Your browser does not support the HTML5 canvas tag.</canvas>
但我无法在画布中的 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" >
<p>Canvas:</p>
<canvas id="myCanvas" >
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>
【问题讨论】：
在我看来，您只需要在画布元素上添加position: absolute 样式，以便将其直接放置在 <img> 之上，并且无需将图像绘制到画布中即可 - 即只需使用合成。
其实我只是想做一些数学函数，这就是为什么它不需要
【参考方案1】：
因为您没有等待图像首先加载。在您的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>
发生的情况是它试图在加载之前绘制图像，执行window.onload 将在加载整个文档（例如图像）后调用代码。否则它可能不显示图像或将其绘制出线。
【讨论】：
【参考方案2】：我尝试了使用 window.onload() 的相同方法，并且在我使用 Microsoft Edge 浏览器尝试之前它一直有效。对我有用的解决方案是将 onload 处理程序附加到图像，例如：
image.onload = function ()
context.drawImage(image, 0, 0);
然后它完美地工作了。
【讨论】：
以上是关于HTML5 Canvas - 如何在画布中的图像上绘制矩形的主要内容，如果未能解决你的问题，请参考以下文章