HTML5画布-如何在画布中在图像上绘制矩形
实际上，我可以使用img.onload函数来完成。我从“HTML5画布-如何在图像背景上画一条线？”中得到的东西。但是我需要在不使用imgfromonload函数的情况下绘制图像，如下所示：
var imagePaper = new Image();
imagePaper.onload = function(){
context.drawImage(imagePaper,100, 20, 500,500);
};
imagePaper.src = "images/main_timerand3papers.png";
}
<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>
<!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>
共有1个答案
因为您不是在等待图像先加载。在脚本中添加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将在加载整个文档（如图像）后调用代码。否则，它可能显示不出图像或画得不对劲。
-
我想在画布上画一段视频。为了实现这一点，我在Javascript中捕获onMouseDown和onMouseUp事件，以获得每个事件的x和y坐标（我需要在画布中设置视频的位置、宽度和高度）。 因此，每次我在画布上绘制视频时，我创建的上一个视频都应该停止，并且必须播放新的视频。两个问题： 1）视频不播放（功能只画第一帧），但他的音频可以 2） 如何停止以前绘制的视频？ 演示：http://jsfid
-
问题内容： 我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。 问题答案： 使用和创建一个路径：
-
我想用javascript在响应画布上画一个圆圈。我得到了画布的宽度和高度，但由于div标签的宽度和高度%，我能够正确地画出圆圈。div标记的宽度和高度以%为单位，因为我想在单个页面上显示5个画布。是否有其他方法可以在一页上放置5块画布，并使用画布的高度和宽度在每个画布上画一个圆圈？还有一件事，我不想要绝对位置，因为根据浏览器的宽度，我想要改变画布的位置 图片：192.168。10.29/1.巴布
-
我可以绘制图像，但我如何旋转该图像例如45度并绘制它，然后绘制另一个图像与-50度旋转在同一画布？ 不适用于我，因为它会旋转所有画布内容。
-
问题内容： 似乎没有绘制椭圆形形状的本机功能。我也不是在寻找蛋形。 是否可以绘制具有2个贝塞尔曲线的椭圆形？有人遇到过吗？ 我的目的是画一些眼睛，实际上我只是使用弧线。提前致谢。 解 因此，scale（）更改所有下一个形状的缩放比例。Save（）之前保存设置，还原用于还原设置以绘制新形状而无需缩放。 感谢Jani 问题答案： 更新： 缩放方法可能会影响笔触宽度的外观 正确的缩放方法可以保持笔画宽度
-
问题内容： 是否有将SVG文件绘制到HTML5画布上的默认方法？GoogleChrome支持将SVG加载为图像（并简单地使用），但是开发者控制台会对此进行警告。 我知道将SVG转换为canvas命令的可能性，但是我希望这不是必需的。我不在乎较旧的浏览器（因此，如果FireFox 4和IE 9支持某些功能，那就足够了）。 问题答案： 编辑2019年12月16日 现在所有主要浏览器都支持Path2D