我有一条由贝塞尔曲线绘制的简单直线。挑战是改变它过渡的位置，即如果曲线的高度增加或减少，它应该在过渡中发生，而不是突然发生。所以我的问题是提供 Canvas 鼠标悬停时的过渡？如何提供曲线过渡？
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();
最佳答案
您可以使用 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);
}
这是代码和 fiddle :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 - 过渡到 Canvas 上绘制的曲线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17050812/