<!DOCTYPE html>
<!-- saved from url=(0045) -->
<html lang="zh-Hans" class="wds">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="no-transform" http-equiv="Cache-Control">
<meta content="zh-CN" http-equiv="Content-Language">
<!-- // 如果需要用到ffmpeg合并视频,需要将COEP和COOP打开,来确保ShareArrayBuffer能够正常使用/ -->
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
</meta>
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
</meta>
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script
</head>
<body>
<div id="container"></div>
<button id="btn">点击录制</button>
<button id="btn1">点击录制1</button>
<div id="image-box" style="display: flex; flex-direction: column;">
</div>
<script>
const data = {
startOffsetTime: 2870000,
startTime: 2870000,
endTime: 5250612,
eleStartTime: 2870000,
eleEndTime: 5250612,
text: '默认文本',
trackId: '65b2d90f-0b9a-5d25-0c22-a1ad92f5100e',
id: '04640d8b-0060-368a-5de0-6a15350d209a',
type: 4,
locationTop: 819,
locationLeft: 729,
width: 462,
height: 42,
fontSize: 42,
opacity: 1,
fontFamily: '龙珠体 Regular',
fontColor: '#000000',
shadowColor: '#000000',
shadowBlur: 5,
shadowOpacity: 1,
shadowAngle: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowEnabled: false,
stroke: '#000000',
strokeEnabled: false,
strokeWidth: 2,
backgroundEnabled: false,
zIndex: 0,
x: 0,
y: 300,
captionswitch: true
}
const {
fontSize,
trackId,
text,
id,
opacity,
fontFamily,
fontColor,
locationLeft,
locationTop,
zIndex,
x, //中心点之间的距离差值x
y, //中心点之间的距离差值x
shadowColor,
shadowBlur,
shadowOffsetX,
shadowOffsetY,
shadowOpacity,
shadowEnabled,
stroke,
strokeEnabled,
strokeWidth,
cornerRadius,
fillEnabled,
fillPatternImage,
} = data;
var stage = new Konva.Stage({
container: 'container', // id of container <div>
width: 1000,
height: 1000
});
// then create layer
var layer = new Konva.Layer();
// create our shape
var node = new Konva.Text({
x: 400, // 水平居中
y: 500,
text: '',
fontSize: fontSize,
fontFamily: fontFamily,
fill: fontColor,
opacity: opacity,
shadowColor: shadowColor,
shadowEnabled: shadowEnabled,
shadowBlur: shadowBlur,
shadowOpacity: shadowOpacity,
shadowOffsetX: shadowOffsetX,
shadowOffsetY: shadowOffsetY,
data: data,
stroke: stroke,
strokeEnabled: strokeEnabled,
strokeWidth: strokeWidth,
fillEnabled,
fillPatternImage,
lineHeight: 1.1,
});
// add the shape to the layer
layer.add(node);
// add the layer to the stage
stage.add(layer);
// draw the image
layer.draw();
let frames = []; // 用于存储每一帧的图像URL
// 打字机的动画
const dzjAnimation = () => {
let duration = 1500; // 持续时间(毫秒)
let fps = 25; // 每秒帧数
let frameInterval = 1000 / fps; // 每帧的间隔时间(毫秒)
let charInterval = duration / text.length; // 每个字符的间隔时间(基于帧数分配)
let elapsedTime = 0;
let displayText = '默认文本'; // 用于构建并显示的部分文本
// 假设有一个元素用于显示文本
// 使用requestAnimationFrame可能更合适,因为它与屏幕刷新率同步
let timer = setInterval(() => {
elapsedTime += frameInterval; // 使用每帧的间隔时间
// 计算在当前已过去的时间内应该显示多少个字符
const charsToShow = Math.floor(elapsedTime / charInterval);
// 更新显示的文本
displayText = text.substring(0, charsToShow);
node.text(displayText);
layer.batchDraw();
const frame = stage.toDataURL({
mimeType: 'image/png',
quality: 1.0,
pixelRatio: window.devicePixelRatio || 1
});
frames.push(frame); // 将帧添加到数组中
// 如果已经显示完所有字符,则清除定时器
if (charsToShow >= text.length) {
clearInterval(timer);
record()
}
}, frameInterval);
}
// 录制canvas动画
document.getElementById('btn').addEventListener('click', () => {
dzjAnimation();
})
document.getElementById('btn1').addEventListener('click', () => {
getCanvasData();
})
const record = () => {
frames.forEach((frame, index) => {
const renderDom = document.getElementById('image-box');
let image = document.createElement('img');
image.src = frame;
image.style.width = '500px';
image.style.height = '500px';
renderDom.appendChild(image);
})
}
</script>
</body>
</html>
如果将konva.js 框架 编写的canvas 进行canvas录制,将canvas动画录制成视频,下面代码是写的动画,想要进行下面的动画录制,知道的麻烦告诉一下,谢谢。
于 2024-08-20 11:08:23 首次发布