如何为此代码绘制多个画布?
我可以使用我的代码绘制单个画布。
我对每个画布和每页 6 画布都有不同的 y 数据。如何在单页中绘制。
你能给出优化代码示例吗?
这是示例图像:
这是我的单个画布绘制代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="canvas" width="160" height="160" style="background-color: black;"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#dbbd7a";
ctx.fill();
var fps = 60;
var n = 1;
var data = [
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, ];
drawWave();
function drawWave() {
setTimeout(function() {
requestAnimationFrame(drawWave);
ctx.lineWidth = "2";
ctx.strokeStyle = 'green';
// Drawing code goes here
n += 1;
if (n >= data.length) {
n = 1;
}
ctx.beginPath();
ctx.moveTo(n - 1, data[n - 1]);
ctx.lineTo(n, data[n]);
ctx.stroke();
ctx.clearRect(n+1, 0, 10, canvas.height);
}, 1000 / fps);
}
</script>
</body>
</html>