二次贝塞尔曲线
公式：
实现坠落效果：
代码如下：
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
let percent = 0;
const data = {
start: [400, 200],
point: [300, 100],
end: [100, 400],
department: "数据1",
value: 4321
};
function init() {
percent = 0; //每次重置进程
draw();
}
function draw() {
ctx.clearRect(0, 0, c.width, c.height); //每次清除画布
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, c.width, c.height);
//设置线条样式
ctx.strokeStyle = createLinearGradient(
data.start,
data.end,
"#fff",
"rgba(255,255,255,.3)"
);
drawCurvePath(data.start, data.point, data.end, percent);
percent += 0.8; //进程增加,这个控制动画速度
if (percent <= 100) {
//没有画完接着调用,画完的话重置进度
requestAnimationFrame(draw);
} else {
init();
}
}
function quadraticBezier(p0, p1, p2, t) {
const k = 1 - t;
return k * k * p0 + 2 * k * t * p1 + t * t * p2;
}
function drawCurvePath(start, point, end, percent) {
ctx.beginPath(); //开始画线
ctx.moveTo(start[0], start[1]); //画笔移动到起点
for (let t = 0; t <= percent / 100; t += 0.005) {
//获取每个时间点的坐标
const x = quadraticBezier(start[0], point[0], end[0], t);
const y = quadraticBezier(start[1], point[1], end[1], t);
ctx.lineTo(x, y); //画出上个时间点到当前时间点的直线
}
ctx.stroke(); //描边
}
// 线性渐变
function createLinearGradient(start, end, startColor, endColor) {
const lineGradient = ctx.createLinearGradient(...start, ...end);
lineGradient.addColorStop(0, startColor);
lineGradient.addColorStop(1, endColor);
return lineGradient;
}
draw();
