Question

我想创建一个画布，然后绘制一条线来转动并绘制一个音符（实际上是一个Sol Key），然后在画布的右侧画出。

我已经搜索并找到了一个绘制线条的脚本 - 但到目前为止，它唯一能做的就是划一条线。每次尝试修改它以创建曲线和数字都是非常错误的。

我的代码：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

好的，这是一个非常狡猾的问题，因为有很多方法可以做到这一点。在JSFiddle的下面的例子中，我使用了一个外部Canvas助手来使代码更容易阅读。

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

它如何动画溶胶：

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

使用

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

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

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

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

HTML5用于绘制音符符号的动画线

1 个答案: