用Canvas绘制心电图动画，让码农也能浪漫起来！

2023-09-27 02:22:18




**用Canvas绘制心电图动画，让码农也能浪漫起来！** 

>本期讲的是利用canvas api绘制一个心电图动画，谁说码农不懂浪漫，只是我们表达方式特殊而已。。。

**前言** 

在我们的印象中，码农都是一群不修边幅、只知道敲代码的理工男，似乎与浪漫这两个字毫不沾边。但其实，码农也是有浪漫的一面的，只不过我们表达方式特殊而已。

比如，我们可以用代码写出优美的诗歌，可以用代码画出精美的图画，甚至可以用代码做出浪漫的动画。

今天，我们就来用Canvas API做一个心电图动画。这个动画虽然简单，但却很有创意，而且非常浪漫。

**步骤** 

1. 创建一个新的Canvas元素

```html
<canvas id="canvas" width="500" height="300"></canvas>

获取Canvas元素的上下文

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

设置Canvas的背景色

ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

绘制心电图

ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
for (let i = 0; i < 1000; i++) {
  ctx.lineTo(i, Math.sin(i / 10) * 100 + canvas.height / 2);
}
ctx.strokeStyle = "red";
ctx.stroke();

让心电图动起来

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  for (let i = 0; i < 1000; i++) {
    ctx.lineTo(i, Math.sin(i / 10 + frame) * 100 + canvas.height / 2);
  }
  ctx.strokeStyle = "red";
  ctx.stroke();

  frame++;
  requestAnimationFrame(animate);
}

let frame = 0;
animate();