JavaScript?canvas實現(xiàn)水球加載動畫

更新時間：2022年04月13日 09:41:08 作者：Mr.王征

這篇文章主要為大家詳細介紹了JavaScript?canvas實現(xiàn)水球加載動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了canvas實現(xiàn)水球加載動畫的具體代碼，供大家參考，具體內容如下

效果展示：

源碼展示：

<!doctype html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>canvas實現(xiàn)水球加載動畫</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">當前瀏覽器不支持canvas 請升級！</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;
?
? ? // 線寬
? ? lineWidth = 2
?
? ? // 大半徑
? ? r = (oW / 2);
? ? cR = r - 8 * lineWidth;
?
? ? ctx.beginPath();
?
? ? ctx.lineWidth = lineWidth;
?
? ? // 水波動畫初始參數(shù)
? ? axisLength = 2 * r - 16 * lineWidth; // Sin 圖形長度
? ? unit = axisLength / 8; // 波浪寬
? ? range = .2 // 浪幅
? ? nowrange = range;
? ? xoffset = 8 * lineWidth; // x 軸偏移量
? ? data = ~~(oRange.value) / 100; // 數(shù)據(jù)量
? ? sp = 0; // 周期偏移量
? ? nowdata = 0;
? ? waveupsp = 0.002; // 水波上漲速度
?
? ? // 圓動畫初始參數(shù)
? ? arcStack = []; // 圓棧
? ? bR = r - 8 * lineWidth;
? ? soffset = -(PI / 2); // 圓動畫起始位置
? ? circleLock = true; // 起始動畫鎖
?
? ? // 獲取圓動畫軌跡點集
? ? 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(); // 圓起始點
?
? ? ctx.strokeStyle = "#1c86d1";
? ? ctx.moveTo(cStartPoint[0], cStartPoint[1])
?
? ? render(); // 開始渲染
?
? ? function drawSine() {
? ? ? ? ctx.beginPath();
? ? ? ? ctx.save();
? ? ? ? var Stack = []; // 記錄起始點和終點坐標
? ? ? ? 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])
? ? ? ? }
?
? ? ? ? // 獲取初始點和結束點
? ? ? ? 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 {
? ? ? ? ? ? // 開始水波動畫
? ? ? ? ? ? // 控制波幅
? ? ? ? ? ? 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">
?感： ?最近貢獻一下我在教學中的小案例 ?希望能給你一些幫助 ,希望大家繼續(xù)關注我的博客
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--王
</pre>
?
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: