在画布HTML5上绘制视频
我想在画布上画一段视频。为了实现这一点，我在Javascript中捕获onMouseDown和onMouseUp事件，以获得每个事件的x和y坐标（我需要在画布中设置视频的位置、宽度和高度）。
因此，每次我在画布上绘制视频时，我创建的上一个视频都应该停止，并且必须播放新的视频。两个问题：
1）视频不播放（功能只画第一帧），但他的音频可以
2） 如何停止以前绘制的视频？
演示：http://jsfiddle.net/e3c3kore/
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
var canvas, context, xStart, yStart, xEnd, yEnd;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);
function mouseDown(e) {
xStart = e.offsetX;
yStart = e.offsetY;
}
function mouseUp(e) {
xEnd = e.offsetX;
yEnd = e.offsetY;
if (xStart != xEnd && yStart != yEnd) {
var video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
video.play();
context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart);
});
}
}
演示：http://jsfiddle.net/e3c3kore/
共有3个答案
从最近几天开始，我一直在做同一个项目，名为“色度键控效果”，它由两个视频混合而成。所以在互联网上搜索了很长一段时间后，我发现了一个名为RecordRTC的api，这个api可以为您提供一个解决方案。
您需要设置连续渲染。你只是渲染视频的第一帧。画布是哑巴，不知道视频。您刚刚将视频中的像素倾倒到画布上。你需要不断更新画布。
最好的方法是使用requestAnimationFrame这确保所有内容都与浏览器自己的渲染同步。
在下面的示例中，渲染在加载视频时开始。如果加载第二个视频，请确保结束以前的更新。
var canvas = document.getElementById("canV");
var ctx = canvas.getContext("2d");
var video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
video.play(); // start playing
update(); //Start rendering
});
function update(){
ctx.drawImage(video,0,0,256,256);
requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram.
}#canV {
width:256px;
height:256px;
}<canvas id="canV" width=256 height=256></canvas>
1） drawImage（）方法只能调用一次。每帧需要调用一次。
2） 调用pause（）方法停止视频。
例如，下面的代码在鼠标向上时启动计时器循环（用于绘制帧），并在鼠标向下时停止任何以前的视频。
var canvas, context, video, xStart, yStart, xEnd, yEnd;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);
function mouseDown(e) {
if (video) {
video.pause();
video = null;
context.clearRect(0, 0, canvas.width, canvas.height);
}
xStart = e.offsetX;
yStart = e.offsetY;
}
function mouseUp(e) {
xEnd = e.offsetX;
yEnd = e.offsetY;
if (xStart != xEnd && yStart != yEnd) {
video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
console.log("loadeddata");
video.play();
setTimeout(videoLoop, 1000 / 30);
});
}
}
function videoLoop() {
if (video && !video.paused && !video.ended) {
context.drawImage(video, xStart, yStart, xEnd - xStart, yEnd - yStart);
setTimeout(videoLoop, 1000 / 30);
}
}
-
问题内容： 是否有将SVG文件绘制到HTML5画布上的默认方法？GoogleChrome支持将SVG加载为图像（并简单地使用），但是开发者控制台会对此进行警告。 我知道将SVG转换为canvas命令的可能性，但是我希望这不是必需的。我不在乎较旧的浏览器（因此，如果FireFox 4和IE 9支持某些功能，那就足够了）。 问题答案： 编辑2019年12月16日 现在所有主要浏览器都支持Path2D
-
问题内容： 我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。 问题答案： 使用和创建一个路径：
-
我想用javascript在响应画布上画一个圆圈。我得到了画布的宽度和高度，但由于div标签的宽度和高度%，我能够正确地画出圆圈。div标记的宽度和高度以%为单位，因为我想在单个页面上显示5个画布。是否有其他方法可以在一页上放置5块画布，并使用画布的高度和宽度在每个画布上画一个圆圈？还有一件事，我不想要绝对位置，因为根据浏览器的宽度，我想要改变画布的位置 图片：192.168。10.29/1.巴布
-
实际上，我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线？”中得到的东西。但是我需要在不使用from函数的情况下绘制图像，如下所示：
-
有一个代码这行，但我不知道怎么做，我只能做一个2行在这同一时间。