Canvas實現貝賽爾曲線軌跡動畫
最近實現的下圖的效果,跟你們分享一下 html
二次貝賽爾曲線
/**
* 二次貝塞爾曲線動畫
* @param {Array<number>} start 起點座標
* @param {Array<number>} 曲度點座標(也就是轉彎的點,不是準確的座標,只是大體的方向)
* @param {Array<number>} end 終點座標
* @param {number} percent 繪製百分比(0-100)
*/
function drawCurvePath(start, point, end, percent){
ctx.beginPath(); //開始畫線
ctx.moveTo(start[0], start[1]); //畫筆移動到起點
for (var t = 0; t <= percent / 100; t += 0.005) {
//獲取每一個時間點的座標
var x = quadraticBezier(start[0], point[0], end[0], t);
var y = quadraticBezier(start[1], point[1], end[1], t);
ctx.lineTo(x, y); //畫出上個時間點到當前時間點的直線
}
ctx.stroke(); //描邊
}
/**
* 二次貝塞爾曲線方程
* @param {Array<number>} start 起點
* @param {Array<number>} 曲度點
* @param {Array<number>} end 終點
* @param {number} 繪製進度(0-1)
*/
function quadraticBezier(p0, p1, p2, t) {
var k = 1 - t;
return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2;
}
複製代碼
更加詳細的貝塞爾曲線內容請參考這篇博客git
放入完整的代碼中github
<!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">
<title>二次貝塞爾曲線動畫</title>
<style>
body {
background: #0f1632;
}
#canvas {
border: 1px solid #ccc;
}
#img {
display: none;
<!--img直接隱藏就行,後面會直接引用-->
}
</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: '數據1',
value: 4321
}
function init(){
percent = 0; //每次重置進程
draw();
}
function draw(){
ctx.clearRect(0, 0, 1500, 750); //每次清除畫布
ctx.strokeStyle = '#ffffff'; //設置線條樣式
drawCurvePath(data.start, data.point, data.end, percent);
percent += 0.8; //進程增長,這個控制動畫速度
if (percent <= 100) { //沒有畫完接着調用,畫完的話重置進度
requestAnimationFrame(draw);
}else{
init()
}
}
function drawCurvePath(start, point, end, percent)
//...
}
function quadraticBezier(p0, p1, p2, t) {
//...
}
</script>
</body>
</html>
複製代碼
動畫就出來了 canvas
drawCurvePath(start, point, end, percent)函數中
point這個參數不是具體曲度的點,只是一個大體的方向
再開看一下 point改成[200,200]的狀況 api
添加漸變
若是想實現墜落的效果,由高到低由遠及近須要給線條加一個漸變的效果 bash
/**
* 建立線性漸變
* @param {Array<number>} start 起點
* @param {Array<number>} 曲度點
* @param {Array<number>} end 終點
* @param {number} 繪製進度(0-1)
*/
function createLinearGradient(start,end,startColor,endColor){
var lineGradient = ctx.createLinearGradient(...start, ...end);
lineGradient.addColorStop(0, startColor);
// lineGradient.addColorStop(0.3, '#fff');
lineGradient.addColorStop(1, endColor);
return lineGradient
}
//draw函數須要作些調整
function draw(){
//ctx.strokeStyle = '#ffffff';
ctx.strokeStyle = createLinearGradient(data.start,
data.end,
'rgba(255,255,255,.2)',
'#fff'
);
//...
}
複製代碼
canvas漸變詳情請參考MDN函數
頭部光暈
添加頭部光暈須要畫一個圓,並設置徑向漸變,利用drawCurvePath函數獲取x,y並重置圓的位置 動畫
function createHeadLight(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(255,255,255,.8)");
radialGradient.addColorStop(1, "transparent");
ctx.fillStyle = radialGradient;
//畫圓
ctx.arc(x, y, 20, 0, 2 * Math.PI, false);
ctx.fill();
}
//drawCurvePath函數須要作些調整
function drawCurvePath(start, point, end, percent){
//...
ctx.stroke(); //描邊
createHeadLight(x,y) //和畫線頻率同樣畫圓
}
複製代碼
繪製圓arc參數詳情參考MDNui
添加文本
添加文本和添加頭部光暈很類似,都是利用drawCurvePath函數獲取x,y並重置文本塊的位置spa
/**
* 建立文本
* @param {String} 部門數據
* @param {Number} 數據
* @param {Number} x軸座標
* @param {Number} y軸座標
*/
function drawText(department, value, x, y) {
ctx.fillStyle = '#fff'
ctx.font = "22px 微軟雅黑";
ctx.fillText(department, x + 30, y + 20); //爲了使文本在光暈右下角x,y軸須要偏移一些距離
var width = ctx.measureText(value).width; //獲取文本的寬度
ctx.fillStyle = createLinearGradient([x + 30, 0], //文本漸變x軸的渲染範圍是[x+30,x+30+文本的寬度],
[x + 30 + width, 0], //這裏y取0,是由於沒找到獲取文本高的api,寫0也是能夠的
'#fffd00',
'#ff6d00'
);
ctx.fillText(value.toLocaleString(), x + 30, y + 50);
}
//drawCurvePath函數須要作些調整
function drawCurvePath(start, point, end, percent, department, value) {
//...
createHeadLight(x,y)
drawText(department, value, x, y)
}
複製代碼
動畫完成後結束位置添加文本和圖片
動畫完成後添加文本和圖片須要注意下,曲線動畫完成後須要當即清理畫布,而後添加文本和圖片
/**
* 建立圖片
* @param {Number} x軸座標
* @param {Number} y軸座標
*/
function drawImg(x, y) {
ctx.drawImage(img, x - img.width / 2, y - img.height);
}
//draw 函數須要作些調整
draw(){
//...
if (percent <= 100) {
requestAnimationFrame(draw);
}else{
ctx.clearRect(0, 0, 1500, 750); //曲線動畫完當即清除畫布
drawText(data.department, //渲染文本
data.value,
data.end[0],
data.end[1])
drawImg(data.end[0], data.end[1]) //渲染圖片
setTimeout(function(){ //2000ms後重繪
init()
},2000)
}
}
複製代碼
結束
參考文章:用canvas繪製一個曲線動畫——深刻理解貝塞爾曲線
本篇如能對您有所幫助，實在是感到榮幸。若有不合理之處也請你們多多指點
相關文章
- 1. Canvas實現貝賽爾曲線軌跡動畫
- 2. canvas 貝塞爾曲線動畫繪製
- 3. 自定義控件之貝賽爾曲線實現手勢軌跡
- 4. canvas實現高階貝塞爾曲線
- 5. 【動畫】簡易製做貝塞爾曲線動畫（JS+css3+canvas）
- 6. Canvas--貝塞爾曲線
- 7. canvas - Bezier 貝塞爾曲線
- 8. 貝賽爾曲線簡介
- 9. Android 貝賽爾曲線
- 10. 基於貝塞爾曲線的變道軌跡規劃
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • R 繪圖 - 函數曲線圖 - R 語言教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章