0

我的视频播放正常，但现在我需要在右下角的视频标签上添加一个徽标（坐标（2,2,60,60）图标大小为 60*60），我想使用画布，但想出了这样的东西..

<html>
<head>
<title>testpage</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var element = document.getElementById('myCanvas');
if (!element || !element.getContext) {
  return;
}

  var context = element.getContext('2d');
  if (!context || !context.drawImage) {
  return;
}

var google_img = new Image();
google_img.addEventListener('load', function () {
   context.drawImage(this, 2, 2, 60, 60);
},false);
google_img.src = "logo.png";

},false);
</script>
</head>
<body>
<div align="center" style="padding-top:25px;">
<video src="Simplevideo.mp4"  width="610" height="380" type="video/mp4" controls="controls"><p>Your browser does not support the video.</p></video> 
<canvas id="myCanvas" width="62" height="62">Your browser does not support HTML5 Canvas element.</canvas>
</div>
</body>
</html>

任何帮助得到它..

提前致谢

夏尔·阿里·谢克

4

1 回答 1

0

您可以像 loxxy 在评论中所说的那样简单地使用 div，但是如果您出于某种原因真的想使用画布，这里有一个带有您的代码的 jsfiddle（已修复）：

http://jsfiddle.net/aS9VG/

诀窍是将元素设置为绝对位置，以便它可以与另一个元素重叠：

style="position:absolute;right:150px;bottom:300px"
于 2012-12-27T13:21:26.883 回答