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

【问题标题】：transition to curve drawn in canvas?过渡到画布中绘制的曲线？
【发布时间】：2013-06-11 18:08:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript canvas transition bezier

【解决方案1】：

您可以使用 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>

【讨论】：

：感谢您的努力并完全理解如何操作控制点，但是过渡效果如何？javascript如何在画布中为曲线提供过渡
仍然不确定我是否理解...当鼠标进入画布时，您想将线条动画成曲线吗？如果是这样，我已经编辑了我的答案来做到这一点。
@markE：无论如何，我想将这条线从一条小直线变为一条大直线..我想我已经给你带来了足够的麻烦，说真的..你对编码充满热情，我想我得到了答案——英国皇家空军。谢谢！！！
@markE：我的代码有构造函数模式我无法弄清楚要在哪里进行更改，我尝试了一些东西但没有用，我现在很困惑！这是我之前给你的代码--jsfiddle.net/jayeshjain24/UmSss 请帮我更改这个小提琴本身的代码，因为这是我第一次使用构造函数和原型。我想通过在过渡中增加 endy 和控制点 y 来将这条线从一条小直线动画到一条更大的直线。这种过渡应该发生在画布鼠标悬停上。请帮我做最后一次