过渡到画布中绘制的曲线？

我有一条简单的直线，由贝塞尔曲线绘制。挑战在于改变它转换的位置，即如果曲线的高度增加或减少，它应该发生在转换中，而不是突然发生。所以我的问题是提供画布上鼠标悬停的过渡？如何提供过渡到曲线？过渡到画布中绘制的曲线？

canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d") 
ctx.lineWidth = 6; 
ctx.strokeStyle = "#333"; 
ctx.beginPath(); 
ctx.moveTo(328, 347); 
ctx.bezierCurveTo(326, 387, 326, 386, 326, 420); 
ctx.stroke();

来源

2013-06-11 Leonardo Da Codinchi

您可以使用requestAnimationFrame在mouseenter上为曲线设置动画。

这是做动画的功能：

最佳实践正在转向使用requestAnimationFrame代替的setInterval。此代码将RAF封装在超时内以控制帧速率。

function draw() { 
    setTimeout(function() { 

     // request another loop 
     requestAnimationFrame(draw); 

     // animate the control point 
     cpY+=movement; 
     if (cpY<50 || cpY>250){movement= -movement;}   

     // draw the new bezier 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(100,150); 
     ctx.quadraticCurveTo(150,cpY,200,150); 
     ctx.lineWidth=10; 
     ctx.stroke(); 

    }, 1000/fps); 
}

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/p5snk/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

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

    var cpY = 150; 
    var movement = -8; 
    var fps = 60; 

    $("#canvas").mouseenter(function() { 
     cpY = 150; 
     movement = -10; 
     draw(); 
    }); 
    $("#canvas").mouseleave(function() { 
     cpY = 50; 
     movement = 15; 
     draw(); 
    }); 

    drawLine(); 

    function drawLine() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(100, 150); 
     ctx.lineTo(200, 150); 
     ctx.lineWidth = 10; 
     ctx.stroke(); 
    } 

    function draw() { 
     setTimeout(function() { 

      if (cpY < 50) { 
       return; 
      } 
      if (cpY > 150) { 
       drawLine(); 
       return; 
      } 

      // request another loop 
      requestAnimationFrame(draw); 

      // animate the control point 
      cpY += movement; 

      // draw the new bezier 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      ctx.beginPath(); 
      ctx.moveTo(100, 150); 
      ctx.quadraticCurveTo(150, cpY, 200, 150); 
      ctx.lineWidth = 10; 
      ctx.stroke(); 

     }, 1000/fps); 
    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2013-06-11 18:47:56 markE

：我很欣赏你的努力，完全了解如何操作控制点，但关于过渡效果什么的javascript怎么给过渡曲线？在画布中 –

仍然不确定我明白...当鼠标进入画布时，您是否想要将曲线变成曲线？如果是这样，我编辑了我的答案来做到这一点。 – markE

+1尼斯小提琴！ – Jarrod

过渡到画布中绘制的曲线？

回答

相关问题