Recently realized the effect below, share with you
Quadratic Bezier curve
/** * quadratic Bezier curve animation * @param {Array<number>} start start coordinates * @param {Array<number>} curvature point coordinates * @param {Array<number>} end End coordinates * @param {number} percent Percent (0-100) */functiondrawCurvePath(start, point, end, percent){ ctx.beginPath(); Ctx.moveto (start[0], start[1]); // Move the brush to the starting pointfor(var t = 0; t <= percent / 100; Var x = quadraticBezier(start[0], point[0], end[0], t); var y = quadraticBezier(start[1], point[1], end[1], t); ctx.lineTo(x, y); // Draw a line from the previous point in time to the current point in time} ctx.stroke(); @param {Array<number>} end * @param {Array<number>} end * @param {Array<number>} end * @param {Array<number>} end @param {number} Drawing progress (0-1) */function quadraticBezier(p0, p1, p2, t) {
var k = 1 - t;
return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2;
}
Copy the codeSee this blog post for more details on bezier curves
Put it in the complete code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> < span style> body {background:#0f1632;
}
#canvas {
border: 1px solid #ccc;
}
#img {display: none; <! </style> </head> <body> <canvas id="canvas" width="1500" height="750"></canvas>
<img id="img" src="https://s3.imgsha.com/2019/04/22/light.png">
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var img = document.getElementById('img');
var percent = 0;
var data = {
start: [400, 200],
point: [300, 100],
end: [100, 400],
department: Data '1',
value: 4321
}
function init(){ percent = 0; // each reset process draw(); }function draw(){ ctx.clearRect(0, 0, 1500, 750); // Each time clear the canvas ctx.strokeStyle ='#ffffff'; DrawCurvePath (data.start, data.point, data.end, percent); Percent + = 0.8; // Process increment, this controls the animation speedifRequestAnimationFrame (draw) {percent <= 100; percent <= 100; percent <= 100; }else{
init()
}
}
function drawCurvePath(start, point, end, percent)
//...
}
function quadraticBezier(p0, p1, p2, t) {
//...
}
</script>
</body>
</html>
Copy the codeThe animation comes out
drawCurvePath(start, point, end, percent)
point
Let’s see if point is changed to [200,200]
Add a gradient
If you want to achieve the effect of falling, you need to add a gradient effect to the line from high to low to far and near
/** * Create linear gradient * @param {Array<number>} start start * @param {Array<number>} curvepoint * @param {Array<number>} end End * @param {number} Drawing progress (0-1) */functioncreateLinearGradient(start,end,startColor,endColor){ var lineGradient = ctx.createLinearGradient(... start, ... end); lineGradient.addColorStop(0, startColor); / / lineGradient. AddColorStop (0.3,'#fff');
lineGradient.addColorStop(1, endColor);
returnLineGradient} // The draw function needs some tweakingfunction draw(){
//ctx.strokeStyle = '#ffffff';
ctx.strokeStyle = createLinearGradient(data.start,
data.end,
'rgba (255255255, 2)'.'#fff'); / /... }Copy the codeCanvas gradient details refer to MDN
The head halo
To add the head flare, draw a circle and set the radial gradient. Use the drawCurvePath function to get x,y and reset the circle
functioncreateHeadLight(x,y){ ctx.beginPath(); Var radialGradient = CTX. CreateRadialGradient (x, y, 0, x, y, 20); radialGradient.addColorStop(0,"rgba(255,255,255,1)");
radialGradient.addColorStop(.2, "Rgba (255255255, 8)");
radialGradient.addColorStop(1, "transparent"); ctx.fillStyle = radialGradient; // Draw circle ctx.arc(x, y, 20, 0, 2 * math.pi,false); ctx.fill(); } // The drawCurvePath function needs to be adjustedfunctiondrawCurvePath(start, point, end, percent){ //... ctx.stroke(); CreateHeadLight (x,y);Copy the codeDraw circle ARC parameters refer to MDN for details
To add text
Adding text is similar to adding a header flare, using the drawCurvePath function to get x,y and reset the text block
/** * Create text * @param {String} department data * @param {Number} data * @param {Number} x coordinates * @param {Number} y coordinates */function drawText(department, value, x, y) {
ctx.fillStyle = '#fff'
ctx.font = "22px Microsoft Yahei"; ctx.fillText(department, x + 30, y + 20); MeasureText (value).width; measureText(value).width; measureText(value).width; FillStyle = createLinearGradient([x +30,x+30+ the width of the text], [x+30 + width, 0], // the value of y is set to 0 because there is no API to get the height of the text'#fffd00'.'#ff6d00'); ctx.fillText(value.toLocaleString(), x + 30, y + 50); } // The drawCurvePath function needs to be adjustedfunction drawCurvePath(start, point, end, percent, department, value) {
//...
createHeadLight(x,y)
drawText(department, value, x, y)
}
Copy the codeAdd text and image to end position after animation is complete
Add text and images after the animation is complete. Clean the canvas immediately after the curve animation is complete, and then add text and images
@param {Number} x coordinates @param {Number} y coordinates */functiondrawImg(x, y) { ctx.drawImage(img, x - img.width / 2, y - img.height); } // The draw function needs some adjustmentsdraw() {/ /...if (percent <= 100) {
requestAnimationFrame(draw);
}else{ ctx.clearRect(0, 0, 1500, 750); DrawText (data.department, // Render data.value, data.end[0], data.end[1]) drawImg(data.end[0], Data.end [1]) // Render the imagesetTimeout(function(){//2000ms after redraw init()},2000)}}Copy the codeThe end of the
This sample contains complete code
Article header diagram sample complete code
Reference article: Draw a curve animation on Canvas – understand Bessel curves in depth
It would be my pleasure to be of any help to you. If have unreasonable place also ask everybody to give directions a lot