JavaScript?canvas實(shí)現(xiàn)水球加載動(dòng)畫(huà)
更新時(shí)間：2022年04月13日 09:41:08 作者：Mr.王征
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實(shí)現(xiàn)水球加載動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了canvas實(shí)現(xiàn)水球加載動(dòng)畫(huà)的具體代碼，供大家參考，具體內(nèi)容如下
效果展示：
源碼展示：
<!doctype html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>canvas實(shí)現(xiàn)水球加載動(dòng)畫(huà)</title>
? ? <style>
? ? ? ? body {
? ? ? ? ? ? display:flex;
? ? ? ? ? ? flex-flow:column wrap;
? ? ? ? ? ? justify-content:center;
? ? ? ? ? ? align-items:center;
? ? ? ? }
? ? ? ? #c {
? ? ? ? ? ? margin-top:20px;
? ? ? ? }
? ? ? ? input[type=range]::before {
? ? ? ? ? ? content:attr(min);
? ? ? ? ? ? color:#000;
? ? ? ? ? ? padding-right:5px;
? ? ? ? }
? ? ? ? input[type=range]::after {
? ? ? ? ? ? content:attr(max);
? ? ? ? ? ? color:#000;
? ? ? ? ? ? padding-left:5px;
? ? ? ? }
? ? </style>
</head>
<body>
<canvas id="c">當(dāng)前瀏覽器不支持canvas 請(qǐng)升級(jí)！</canvas>
<input type="range" name="range" min="0" max="100" step="1">
?
<script>
? ? canvas = document.getElementById("c");
? ? ctx = canvas.getContext("2d");
? ? oRange = document.getElementsByName("range")[0];
?
? ? M = Math;
? ? Sin = M.sin;
? ? Cos = M.cos;
? ? Sqrt = M.sqrt;
? ? Pow = M.pow;
? ? PI = M.PI;
? ? Round = M.round;
?
? ? oW = canvas.width = 300;
? ? oH = canvas.height = 300;
?
? ? // 線(xiàn)寬
? ? lineWidth = 2
?
? ? // 大半徑
? ? r = (oW / 2);
? ? cR = r - 8 * lineWidth;
?
? ? ctx.beginPath();
?
? ? ctx.lineWidth = lineWidth;
?
? ? // 水波動(dòng)畫(huà)初始參數(shù)
? ? axisLength = 2 * r - 16 * lineWidth; // Sin 圖形長(zhǎng)度
? ? unit = axisLength / 8; // 波浪寬
? ? range = .2 // 浪幅
? ? nowrange = range;
? ? xoffset = 8 * lineWidth; // x 軸偏移量
? ? data = ~~(oRange.value) / 100; // 數(shù)據(jù)量
? ? sp = 0; // 周期偏移量
? ? nowdata = 0;
? ? waveupsp = 0.002; // 水波上漲速度
?
? ? // 圓動(dòng)畫(huà)初始參數(shù)
? ? arcStack = []; // 圓棧
? ? bR = r - 8 * lineWidth;
? ? soffset = -(PI / 2); // 圓動(dòng)畫(huà)起始位置
? ? circleLock = true; // 起始動(dòng)畫(huà)鎖
?
? ? // 獲取圓動(dòng)畫(huà)軌跡點(diǎn)集
? ? for (var i = soffset; i < soffset + 2 * PI; i += 1 / (8 * PI)) {
? ? ? ? arcStack.push([
? ? ? ? ? ? r + bR * Cos(i),
? ? ? ? ? ? r + bR * Sin(i)
? ? ? ? ])
? ? }
?
? ? cStartPoint = arcStack.shift(); // 圓起始點(diǎn)
?
? ? ctx.strokeStyle = "#1c86d1";
? ? ctx.moveTo(cStartPoint[0], cStartPoint[1])
?
? ? render(); // 開(kāi)始渲染
?
? ? function drawSine() {
? ? ? ? ctx.beginPath();
? ? ? ? ctx.save();
? ? ? ? var Stack = []; // 記錄起始點(diǎn)和終點(diǎn)坐標(biāo)
? ? ? ? for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) {
? ? ? ? ? ? var x = sp + (xoffset + i) / unit;
? ? ? ? ? ? var y = Sin(x) * nowrange;
?
? ? ? ? ? ? var dx = i;
?
? ? ? ? ? ? var dy = 2 * cR * (1 - nowdata) + (r - cR) - (unit * y);
?
? ? ? ? ? ? ctx.lineTo(dx, dy);
? ? ? ? ? ? Stack.push([dx, dy])
? ? ? ? }
?
? ? ? ? // 獲取初始點(diǎn)和結(jié)束點(diǎn)
? ? ? ? var startP = Stack[0]
? ? ? ? var endP = Stack[Stack.length - 1]
?
? ? ? ? ctx.lineTo(xoffset + axisLength, oW);
? ? ? ? ctx.lineTo(xoffset, oW);
? ? ? ? ctx.lineTo(startP[0], startP[1])
? ? ? ? ctx.fillStyle = "#1c86d1";
? ? ? ? ctx.fill()
? ? ? ? ctx.restore();
? ? }
?
? ? function drawText() {
? ? ? ? ctx.globalCompositeOperation = 'source-over';
?
? ? ? ? var size = 0.4 * cR;
? ? ? ? ctx.font = 'bold ' + size + 'px Microsoft Yahei';
?
? ? ? ? txt = (nowdata.toFixed(2) * 100).toFixed(0) + '%';
?
? ? ? ? var fonty = r + size / 2;
? ? ? ? var fontx = r - size * 0.8;
? ? ? ? ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
? ? ? ? ctx.fillText(txt, fontx, fonty)
? ? }
?
? ? function render() {
? ? ? ? ctx.clearRect(0, 0, oW, oH);
?
? ? ? ? if (circleLock) {
? ? ? ? ? ? if (arcStack.length) {
? ? ? ? ? ? ? ? var temp = arcStack.shift();
? ? ? ? ? ? ? ? ctx.lineTo(temp[0], temp[1])
? ? ? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? circleLock = false;
? ? ? ? ? ? ? ? ctx.lineTo(cStartPoint[0], cStartPoint[1])
? ? ? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? ? ? arcStack = null;
?
? ? ? ? ? ? ? ? ctx.globalCompositeOperation = 'destination-over';
? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ctx.lineWidth = lineWidth;
? ? ? ? ? ? ? ? ctx.arc(r, r, bR, 0, 2 * PI, 1);
?
? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ctx.save();
? ? ? ? ? ? ? ? ctx.arc(r, r, r - 16 * lineWidth, 0, 2 * PI, 1);
? ? ? ? ? ? ? ? ctx.restore()
? ? ? ? ? ? ? ? ctx.clip();
?
? ? ? ? ? ? ? ? ctx.fillStyle = "#1c86d1";
?
? ? ? ? ? ? ? ? // 初始拖拽控件
? ? ? ? ? ? ? ? oRange.addEventListener("change", function() {
? ? ? ? ? ? ? ? ? ? data = ~~(oRange.value) / 100;
? ? ? ? ? ? ? ? ? ? console.log("data=" + data)
? ? ? ? ? ? ? ? }, 0);
? ? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? ? // 開(kāi)始水波動(dòng)畫(huà)
? ? ? ? ? ? // 控制波幅
? ? ? ? ? ? if (data >= 0.85) {
? ? ? ? ? ? ? ? if (nowrange > range / 4) {
? ? ? ? ? ? ? ? ? ? var t = range * 0.01;
? ? ? ? ? ? ? ? ? ? nowrange -= t;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else if (data <= 0.1) {
? ? ? ? ? ? ? ? if (nowrange < range * 1.5) {
? ? ? ? ? ? ? ? ? ? var t = range * 0.01;
? ? ? ? ? ? ? ? ? ? nowrange += t;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? if (nowrange <= range) {
? ? ? ? ? ? ? ? ? ? var t = range * 0.01;
? ? ? ? ? ? ? ? ? ? nowrange += t;
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? if (nowrange >= range) {
? ? ? ? ? ? ? ? ? ? var t = range * 0.01;
? ? ? ? ? ? ? ? ? ? nowrange -= t;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? ? ? if ((data - nowdata) > 0) {
? ? ? ? ? ? ? ? nowdata += waveupsp;
? ? ? ? ? ? }
?
? ? ? ? ? ? if ((data - nowdata) < 0) {
? ? ? ? ? ? ? ? nowdata -= waveupsp
? ? ? ? ? ? }
?
? ? ? ? ? ? sp += 0.07;
? ? ? ? ? ? drawSine();
? ? ? ? ? ? drawText();
? ? ? ? }
? ? ? ? requestAnimationFrame(render)
? ? }
</script>
<hr>
?
<pre style="color:red">
?感： ?最近貢獻(xiàn)一下我在教學(xué)中的小案例 ?希望能給你一些幫助 ,希望大家繼續(xù)關(guān)注我的博客
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--王
</pre>
?
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
原生javascript實(shí)現(xiàn)讀寫(xiě)CSS樣式的方法詳解
最近學(xué)習(xí)中遇到這個(gè)問(wèn)題，為了日后方便查詢(xún)，本人翻閱了一些資料總結(jié)了以下方法，僅限原生JS，如有不對(duì)的地方歡迎指出！只求大家看完覺(jué)得有學(xué)到點(diǎn)什么就OK了！下面這篇文章主要介紹了利用原生javascript實(shí)現(xiàn)讀寫(xiě)CSS樣式的方法,需要的朋友可以參考下。2017-02-02
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
最丑的時(shí)鐘效果！js canvas時(shí)鐘制作方法
最丑的時(shí)鐘效果，這篇文章主要為大家詳細(xì)介紹了js canvas時(shí)鐘制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JS+CSS實(shí)現(xiàn)分類(lèi)動(dòng)態(tài)選擇及移動(dòng)功能效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)分類(lèi)動(dòng)態(tài)選擇及移動(dòng)功能效果代碼,涉及JavaScript實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
淺談javascript中的Function和Arguments
下面小編就為大家?guī)?lái)一篇淺談javascript中的Function和Arguments。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06
創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼
這篇文章主要介紹了創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
由于javascript是一種無(wú)類(lèi)型語(yǔ)言,所以一個(gè)數(shù)組的元素可以具有任意的數(shù)據(jù)類(lèi)型,同一個(gè)數(shù)組的不同元素 可以具有不同的類(lèi)型,數(shù)組的元素設(shè)置可以包含其他數(shù)組,這樣就可以創(chuàng)建一個(gè)復(fù)雜的數(shù)組了.2009-12-12
刷新頁(yè)面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行
這篇文章主要介紹了刷新頁(yè)面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
JS中setTimeout和setInterval的最大延時(shí)值詳解
這篇文章主要介紹了JS中setTimeout和setInterval的最大延時(shí)值的相關(guān)資料，文中通過(guò)示例代碼介紹的很詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-02-02