<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="w
idth=device-w
idth,
initial-scale=1
.0" />
<title>Document</title>
</head>
<style>
/* styles
.css */
body {
font-family
: Arial, sans-serif;
marg
in: 0;
padd
ing
: 0;
background-color
: #f2f2f2;
}
h1 {
marg
in: 0;
}
ma
in {
max-w
idth
: 8
00px;
marg
in: 2
0px auto;
padd
ing
: 2
0px;
background-color
: #fff;
box-shadow
: 0 2px 4px rgba(
0,
0,
0,
0.1);
}
#box {
d
isplay
: flex;
flex-direction
: column;
align-items
: center;
}
.buttons {
marg
in-bottom
: 2
0px;
}
button {
padd
ing
: 1
0px 2
0px;
marg
in-right
: 1
0px;
background-color
: #333;
color
: #fff;
border
: none;
border-radius
: 4px;
cursor
: po
inter;
}
.background-div {
marg
in-bottom
: 2
0px;
}
.background-btn {
padd
ing
: 1
0px 2
0px;
background-color
: #333;
color
: #fff;
border
: none;
border-radius
: 4px;
cursor
: po
inter;
}
.content {
w
idth
: 8
0%;
background-color
: #f9f9f9;
padd
ing
: 2
0px;
}
h2 {
marg
in-top
: 0;
}
#todo-form {
d
isplay
: flex;
justify-content
: center;
align-items
: center;
marg
in-bottom
: 1
0px;
gap
: 1
0px;
}
.input-field {
padd
ing
: 1
0px;
flex
: 1;
}
.submit-btn {
padd
ing
: 1
0px 2
0px;
background-color
: #333;
color
: #fff;
border
: none;
border-radius
: 4px;
cursor
: po
inter;
}
.l
ist {
height
: 4
00px;
}
.item {
height
: 4
0px;
border-radius
: 4px;
l
ine-height
: 4
0px;
padd
ing
: 8px;
marg
in-bottom
: 8px;
background-color
: #eee;
}
.item
:hover {
background-color
: #ccc;
}
.h
idden {
d
isplay
: none;
}
</style>
<body>
<ma
in>
<div class="buttons">
<button class="start-btn">开始录制</button>
<button class="pa
use-btn">暂停录制</button>
<button class="resume-btn">继续录制</button>
<button class="stop-btn">结束录制</button>
</div>
<div
id="box">
<section class="content">
<h2>TODO L
IST</h2>
<div class="background-div">
<button class="background-btn">切换背景颜色</button>
</div>
<div
id="todo-form">
<
input type="text" class="
input-field" placeholder="输入待办事项" />
<button type="submit" class="submit-btn">提交</button>
</div>
<div class="l
ist"></div>
</section>
</div>
<img src="" alt="" class="h
idden" />
</ma
in>
<script src="https
://cdn
.bootcdn
.net/ajax/libs/html2
canvas/1
.4
.1/html2
canvas.m
in.js"></script>
<script>
let col =
0;
const colors = ['#ff7
08d', '#598bff', '#42aaff', '#ffc94d', '#2ce69b'];
document
.addEventL
istener('DOMContentLoaded', () => {
document
.querySelector('
.background-btn')
.addEventL
istener('click', () => {
document
.querySelector('
.content')
.style
.background = colors[col];
col = (col + 1) % colors
.length;
canvasFunction();
});
document
.querySelector('
.input-field')
.addEventL
istener('
input', event => {
canvasFunction();
});
document
.querySelector('
.submit-btn')
.addEventL
istener('click', () => {
const text = document
.querySelector('
.input-field')
.value;
document
.querySelector('
.input-field')
.value = '';
const div = document
.createElement('div');
div
.setAttribute('class', 'item');
div
.innerText = text;
document
.querySelector('
.l
ist')
.appendChild(div);
canvasFunction();
});
const box = document
.getElementBy
Id('box');
const boxBound
ingClientRect = box
.getBound
ingClientRect();
const w = boxBound
ingClientRect
.w
idth;
const h = boxBound
ingClientRect
.height;
const
canvas = document
.createElement('
canvas');
canvas.setAttribute('
id', '
canvas');
canvas.setAttribute('w
idth', w);
canvas.setAttribute('height', h);
canvas.style
.d
isplay = 'none';
box
.appendChild(
canvas);
const img = document
.querySelector('img');
const ctx =
canvas.getContext('2d');
const allChunks = [];
const stream =
canvas.captureStream(6
0); // 6
0 FPS record
ing 1秒6
0帧
const recorder = new MediaRecorder(stream, {
mimeType
: 'v
ideo/webm;codecs=vp9'
});
recorder
.ondataavailable = e => {
allChunks
.push(e
.data);
};
// 开始
document
.querySelector('
.start-btn')
.addEventL
istener('click', () => {
if (MediaRecorder
.isTypeSupported('v
ideo/webm;codecs=vp9')) {
canvasFunction();
console
.log('开始');
recorder
.start(1
0);
}
});
// 暂停
document
.querySelector('
.pa
use-btn')
.addEventL
istener('click', () => {
console
.log('暂停');
recorder
.pa
use();
});
// 继续
document
.querySelector('
.resume-btn')
.addEventL
istener('click', () => {
console
.log('继续');
recorder
.resume();
});
// 结束
document
.querySelector('
.stop-btn')
.addEventL
istener('click', () => {
console
.log('结束录制');
canvasFunction();
setTimeout(() => {
console
.log('保存');
recorder
.stop();
debugger;
const fullBlob = new Blob(allChunks);
const v
ideoUrl = w
indow
.URL
.createObjectURL(fullBlob);
const v
ideo = document
.createElement('v
ideo');
v
ideo
.controls = true;
v
ideo
.src = v
ideoUrl;
v
ideo
.muted = true;
v
ideo
.autoplay = true;
document
.body
.appendChild(v
ideo);
}, 1
000);
});
const
canvasFunction = () => {
html2
canvas(box, {
useCORS
: true })
.then(
canvas => {
const imgStr =
canvas.toDataURL('image/png');
img
.src = imgStr;
img
.onload = function () {
ctx
.drawImage(img,
0,
0, w, h);
};
});
};
});
</script>
</body>
</html>以上代码是根据html2
canvas生成视频，但在录制结束时recorder
.ondataavailable = e => {
allChunks
.push(e
.data);
};这个事件拿到的数据始终为
0 ，如何
解决？
本文介绍了一种解决在使用Chart.js库时遇到的Canvas is already in use错误的方法。该错误通常发生在尝试在同一Canvas元素上多次绘制图表时。文章提供了一个通过移除并重新创建目标DOM元素来规避此问题的具体方案。
扫一扫
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
