HTML5 / js - 如何在两个坐标之间设置直线动画？ [英] HTML5 / js - how to animate straight line between two coordinates?

问题描述

简单问题（可能是错误的）

我希望使用HTML5和/或Jquery在直线上的两个点之间进行动画制作。

  ctx.beginPath（）; 
 ctx.moveTo（0,0）; // 
 ctx.lineTo（100,100）; // b 
 ctx.stroke（）; 
  

Simple enough question (could be wrong)

im looking to animate between two points in a straight line, using HTML5 and/or Jquery.

ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();

http://jsbin.com/enobes

EDIT : a jquery plugin i'm developing for path animation http://lazylinepainter.info/

解决方案

Thanks valli-R and Zevan,

I've coded an amalgam of your two answers which uses lerp with requestAnimFrame

http://jsbin.com/enobes/6

这篇关于HTML5 / js - 如何在两个坐标之间设置直线动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！