HTML5 动画线绘制音符符号答案

【问题标题】：HTML5 Animate line to draw musical note symbolHTML5 动画线绘制音符符号
【发布时间】：2018-06-13 03:16:30
【问题描述】：

我想创建一个画布，画一条线，然后画一个音符（实际上是一个 Sol Key），然后在画布的右侧消失。

我已经搜索并找到了一个画线的脚本 - 但到目前为止它唯一做的就是画一条线。每次修改它以创建曲线和图形的尝试都大错特错。

我的代码：

var canvas = $("#paper")[0];
var c = canvas.getContext("2d");
var h = canvas.height;

var startX = 10;
var startY = h/2;
var endX = 500;
var endY = h/2;
var amount = 0;
setInterval(function() {
  amount += 0.002; // change to alter duration
  if (amount > 1) amount = 1;
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.strokeStyle = "black";
  c.moveTo(startX, startY);
  c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
  c.stroke();
}, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="paper" width="800" height="600" border="1"></canvas>

【问题讨论】：

我只想指出，使用 setInterval 或 setTimeout 为画布设置动画并不是正确的方法。帧将以不精确的增量时间绘制，从而导致性能不佳。 window.requestAnimationFrame 是要走的路。使用诸如Canvas.js 之类的外部脚本会使这更容易。
我想这样做的方法是将 sol 键作为 svg 路径，对其进行解析，然后进行插值以使其在绘图时真正具有动画效果。

标签： javascript html animation canvas

【解决方案1】：

好的，这是一个相当宽泛的问题，因为有很多方法可以做到这一点。在下面的 JSFiddle 示例中，我使用了外部 Canvas 帮助器来使代码更易于阅读。

由于不需要插值，所以我没有使用它，所以动画非常简单。

它是如何为溶胶设置动画的：

获取 sol 的 SVG 路径
解析它并使其更易于阅读
开始为第一个路径项设置动画 - 等待 - 并转到下一个
几秒钟后，你就有了你的溶胶！

使用

const canvas = new Canvas(); // Canvas.js

绘制循环和更新循环非常明显......

JSFiddle：https://jsfiddle.net/y0g2q33g/

注意这个小提琴中的代码根本没有优化:)

【讨论】：