最近實現的下圖的效果,跟大家分享一下
假如我們要畫下圖曲線的動畫
如果每次都畫一條短線連接起來,如下圖被分成五段
再看十段
要是被分的段數夠多時每次畫一段就很像曲線軌跡了
二次貝賽爾曲線 /** * 二次貝塞爾曲線動畫* @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; }更加詳細的貝塞爾曲線內容請參考這篇博客
放入完整的程式碼中
<!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(raw); } 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>動畫就出來了
之前說了drawCurvePath(start, point, end, percent)函數中point這個參數不是具體曲度的點,只是一個大致的方向
再開看point改為[200,200]的情況
如果想達到墜落的效果,由高到低由遠及近需要為線條加上一個漸變的效果
/** * 建立線性漸進* @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.addorStop(0, rgba(255, 25,255,55, 1)); radialGradient.addColorStop(.2, rgba(255,255,255,.8)); radialGradient.addColorStop(1, transparent); ctx.fillStyle = radialGradient; //畫圓ctx.arc(x, y, 20, Math 0 * Math 0, Math 0 .PI, false); ctx.fill();}//drawCurvePath函數需要做些調整function drawCurvePath(start, point, end, percent){ //... ctx.stroke(); //描邊createHeadLight(x,y) //和畫線頻率一樣畫圓}繪製圓arc參數詳情參考MDN
添加文字和添加頭部光暈很相似,都是利用drawCurvePath函數獲取x,y並重置文本塊的位置
/** * 建立文字* @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繪製一個曲線動畫-深入理解貝塞爾曲線
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。