最近實(shí)現(xiàn)的下圖的效果,跟大家分享一下
假如我們要畫下圖曲線的動(dòng)畫
如果每次都畫一條短線連接起來,如下圖被分成五段
再看十段
要是被分的段數(shù)足夠多時(shí)每次畫一段就很像曲線軌跡了
二次貝賽爾曲線
/** * 二次貝塞爾曲線動(dòng)畫 * @param {Array<number>} start 起點(diǎn)坐標(biāo) * @param {Array<number>} 曲度點(diǎn)坐標(biāo)(也就是轉(zhuǎn)彎的點(diǎn),不是準(zhǔn)確的坐標(biāo),只是大致的方向) * @param {Array<number>} end 終點(diǎn)坐標(biāo) * @param {number} percent 繪制百分比(0-100) */ function drawCurvePath(start, point, end, percent){ ctx.beginPath(); //開始畫線 ctx.moveTo(start[0], start[1]); //畫筆移動(dòng)到起點(diǎn) for (var t = 0; t <= percent / 100; t += 0.005) { //獲取每個(gè)時(shí)間點(diǎn)的坐標(biāo) var x = quadraticBezier(start[0], point[0], end[0], t); var y = quadraticBezier(start[1], point[1], end[1], t); ctx.lineTo(x, y); //畫出上個(gè)時(shí)間點(diǎn)到當(dāng)前時(shí)間點(diǎn)的直線 } ctx.stroke(); //描邊 } /** * 二次貝塞爾曲線方程 * @param {Array<number>} start 起點(diǎn) * @param {Array<number>} 曲度點(diǎn) * @param {Array<number>} end 終點(diǎn) * @param {number} 繪制進(jìn)度(0-1) */ function quadraticBezier(p0, p1, p2, t) { var k = 1 - t; return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2; }更加詳細(xì)的貝塞爾曲線內(nèi)容請(qǐng)參考這篇博客
放入完整的代碼中
<!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>二次貝塞爾曲線動(dòng)畫</title> <style> body { background: #0f1632; } #canvas { border: 1px solid #ccc; } #img { display: none; <!--img直接隱藏就行,后面會(huì)直接引用--> } </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: '數(shù)據(jù)1', value: 4321 } function init(){ percent = 0; //每次重置進(jìn)程 draw(); } function draw(){ ctx.clearRect(0, 0, 1500, 750); //每次清除畫布 ctx.strokeStyle = '#ffffff'; //設(shè)置線條樣式 drawCurvePath(data.start, data.point, data.end, percent); percent += 0.8; //進(jìn)程增加,這個(gè)控制動(dòng)畫速度 if (percent <= 100) { //沒有畫完接著調(diào)用,畫完的話重置進(jìn)度 requestAnimationFrame(draw); }else{ init() } } function drawCurvePath(start, point, end, percent) //... } function quadraticBezier(p0, p1, p2, t) { //... } </script></body></html>動(dòng)畫就出來了
之前說了 drawCurvePath(start, point, end, percent)函數(shù)中point這個(gè)參數(shù)不是具體曲度的點(diǎn),只是一個(gè)大致的方向
再開看一下 point改為[200,200]的情況
添加漸變
如果想實(shí)現(xiàn)墜落的效果,由高到低由遠(yuǎn)及近需要給線條加一個(gè)漸變的效果
/** * 創(chuàng)建線性漸變 * @param {Array<number>} start 起點(diǎn) * @param {Array<number>} 曲度點(diǎn) * @param {Array<number>} end 終點(diǎn) * @param {number} 繪制進(jìn)度(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函數(shù)需要做些調(diào)整function draw(){ //ctx.strokeStyle = '#ffffff'; ctx.strokeStyle = createLinearGradient(data.start, data.end, 'rgba(255,255,255,.2)', '#fff' ); //...}canvas漸變?cè)斍檎?qǐng)參考MDN
頭部光暈
添加頭部光暈需要畫一個(gè)圓,并設(shè)置徑向漸變,利用drawCurvePath函數(shù)獲取x,y并重置圓的位置
function createHeadLight(x,y){ ctx.beginPath(); //創(chuàng)建徑向漸變 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函數(shù)需要做些調(diào)整function drawCurvePath(start, point, end, percent){ //... ctx.stroke(); //描邊 createHeadLight(x,y) //和畫線頻率一樣畫圓 } 繪制圓arc參數(shù)詳情參考MDN
添加文本
添加文本和添加頭部光暈很相似,都是利用drawCurvePath函數(shù)獲取x,y并重置文本塊的位置
/** * 創(chuàng)建文本 * @param {String} 部門數(shù)據(jù) * @param {Number} 數(shù)據(jù) * @param {Number} x軸坐標(biāo) * @param {Number} y軸坐標(biāo) */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,是因?yàn)闆]找到獲取文本高的api,寫0也是可以的 '#fffd00', '#ff6d00' ); ctx.fillText(value.toLocaleString(), x + 30, y + 50); } //drawCurvePath函數(shù)需要做些調(diào)整 function drawCurvePath(start, point, end, percent, department, value) { //... createHeadLight(x,y) drawText(department, value, x, y) }動(dòng)畫完成后結(jié)束位置添加文本和圖片
動(dòng)畫完成后添加文本和圖片需要注意下,曲線動(dòng)畫完成后需要立即清理畫布,然后添加文本和圖片
/** * 創(chuàng)建圖片 * @param {Number} x軸坐標(biāo) * @param {Number} y軸坐標(biāo) */function drawImg(x, y) { ctx.drawImage(img, x - img.width / 2, y - img.height); }//draw 函數(shù)需要做些調(diào)整draw(){ //... if (percent <= 100) { requestAnimationFrame(draw); }else{ ctx.clearRect(0, 0, 1500, 750); //曲線動(dòng)畫完立即清除畫布 drawText(data.department, //渲染文本 data.value, data.end[0], data.end[1]) drawImg(data.end[0], data.end[1]) //渲染圖片 setTimeout(function(){ //2000ms后重繪 init() },2000) } }結(jié)束
本篇示例完整代碼
文章首圖示例完整代碼
參考文章:用canvas繪制一個(gè)曲線動(dòng)畫——深入理解貝塞爾曲線
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
