當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

使用canvas实现360水球波动

發(fā)布時(shí)間：2025/4/16 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了使用canvas实现360水球波动小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

代碼如下：

<!DOCTYPE html> <html lang="en">? <head>? ?<meta charset="UTF-8"><title>test</title>? ?<style>? ?body {display: flex;flex-flow: column wrap;justify-content: center;align-items: center;}#circular {position: absolute;left: 500px;top: 400px;}#canvas_dom {position: absolute;left: 500px;top: 100px;}</style> </head> <body style="background-color: #0020cad6;">? ? <canvas id="circular" width="1000" height="1000">當(dāng)前瀏覽器不支持canvas請(qǐng)升級(jí)！</canvas> <canvas id="canvas_dom" width="1000" height="1000"></canvas> </body> <script>canvas = document.getElementById("circular");ctx = canvas.getContext("2d");canvas.width = 800;oH = canvas.height = 800;// 線寬 lineWidth = 2;// 大半徑 r = (canvas.width / 2);cR = r - 10 * lineWidth;ctx.beginPath();ctx.lineWidth = lineWidth;// 水波動(dòng)畫(huà)初始參數(shù) axisLength = 2 * r - 16 * lineWidth;// Sin 圖形長(zhǎng)度 ? unit = axisLength / 9;// 波浪寬 range = .3// 浪幅 ? nowrange = range;xoffset = 8 * lineWidth;// 數(shù)據(jù)量 ? sp = 0;// 周期偏移量 ? nowdata = 0;waveupsp = 0.006;// 水波上漲速度 ?// 圓動(dòng)畫(huà)初始參數(shù) ? arcStack = [];// 圓棧 ? bR = r - 8 * lineWidth;soffset = -(Math.PI / 2);// 圓動(dòng)畫(huà)起始位置 ? circleLock = true;// 起始動(dòng)畫(huà)鎖 ? // 獲取圓動(dòng)畫(huà)軌跡點(diǎn)集for (var i = soffset; i < soffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {arcStack.push([r + bR * Math.cos(i), r + bR * Math.sin(i)])}// 圓起始點(diǎn) cStartPoint = arcStack.shift();ctx.strokeStyle = "#1c86d1";ctx.moveTo(cStartPoint[0], cStartPoint[1]);// 開(kāi)始渲染 ? render();var data = 0.5;setInterval(function(){ data = Math.round(Math.random()*10) /10; }, 2000); 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 = Math.sin(x) * .2;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, canvas.width);ctx.lineTo(xoffset, canvas.width);ctx.lineTo(startP[0], startP[1]);//水波的顏色// 創(chuàng)建漸變var grd=ctx.createLinearGradient(0,0,0,canvas.width);grd.addColorStop(0.3,"red");grd.addColorStop(0.3,"#EEA2AD");grd.addColorStop(0.5,"blue");grd.addColorStop(0.7,"#D8BFD8");grd.addColorStop(1,"white");// 填充漸變 ctx.fillStyle=grd;ctx.fill();ctx.restore();}function drawText() {ctx.globalCompositeOperation = 'source-over';var size = 0.2 * 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 = "#00FA9A";ctx.textAlign = 'center';ctx.fillText(txt, r + 5, r + 5)}//最一層function drawCircle() {ctx.beginPath();ctx.lineWidth = 0;ctx.strokeStyle = '#00FFFF';//不要直接 ctx.arc(r, r, cR + 7, 0, 2 * Math.PI);ctx.stroke();ctx.restore();}//第二層function grayCircle() {ctx.beginPath();//寬度 ctx.lineWidth = 12;//顏色 ctx.strokeStyle = '#7FFFAA';ctx.arc(r, r, cR - 5, 0, 2 * Math.PI);ctx.stroke();ctx.restore();ctx.beginPath();}//第二層進(jìn)度圈function orangeCircle() {ctx.beginPath();//寬度 ctx.lineWidth = 2;ctx.strokeStyle = '#af1cd1';//使用這個(gè)使圓環(huán)兩端是圓弧形狀 ctx.lineCap = 'round';ctx.arc(r, r, cR - 5, - (Math.PI / 2) , (nowdata * 360) * (Math.PI / 180.0) - (Math.PI / 2));ctx.stroke();ctx.save()}//裁剪中間水圈function clipCircle() {ctx.beginPath();ctx.arc(r, r, cR - 15, 0, 2 * Math.PI, false);ctx.clip();}//外員動(dòng)態(tài)function wytd(){init_angle = 0;var small_x = Math.cos(init_angle)*80;var small_y = Math.sin(init_angle)*80;ctx.beginPath();ctx.translate(small_x,0);ctx.arc(0,0,10,0,Math.PI*2);ctx.closePath();ctx.fill();ctx.restore();init_angle = init_angle + Math.PI*2/360;if(init_angle >2 ){init_angle = 0;}}//渲染canvas ?function render() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawCircle();grayCircle();//橘黃色進(jìn)度圈// ? orangeCircle();//裁剪中間水圈? ? clipCircle();let aa = 10;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();// 寫(xiě)字 ? drawText();requestAnimationFrame(render)} </script> <script type="text/javascript">var canvas_dom = document.getElementById("canvas_dom");var ctxfs = canvas_dom.getContext('2d');var unit_angle? = Math.PI*2/360;var init_angle = 0;function draw(){//清除位置 ctxfs.clearRect(0,0,canvas_dom.width,canvas_dom.height);//第一個(gè) ctxfs.save();ctxfs.translate(500,300);ctxfs.fillStyle = "red";ctxfs.beginPath();ctxfs.arc(300,0,70,0,Math.PI*2,false);ctxfs.closePath();ctxfs.fill();var small_x = Math.cos(init_angle)*80;var small_y = Math.sin(init_angle)*80;ctxfs.beginPath();//只需要修改后面參數(shù) ctxfs.translate(small_x,20);//arc(移動(dòng)左右位置,移動(dòng)上下位置,大小,不需要修改,不需要修改) a ctxfs.arc(200,10,15,0,Math.PI*2);ctxfs.closePath();ctxfs.fill();ctxfs.restore();init_angle = init_angle + unit_angle;//第二個(gè) ctxfs.save();ctxfs.translate(650,600);ctxfs.fillStyle = "red";ctxfs.beginPath();ctxfs.arc(300,0,70,0,Math.PI*2,false);ctxfs.closePath();ctxfs.fill();var small_x = Math.cos(init_angle)*80;var small_y = Math.sin(init_angle)*80;ctxfs.beginPath();ctxfs.translate(small_x,0);ctxfs.arc(170,20,10,0,Math.PI*2);ctxfs.closePath();ctxfs.fill();ctxfs.restore();//第三個(gè) ctxfs.save();ctxfs.translate(650,900);ctxfs.fillStyle = "red";ctxfs.beginPath();ctxfs.arc(300,0,50,0,Math.PI*2,false);ctxfs.closePath();ctxfs.fill();var small_x = Math.cos(init_angle)*80;var small_y = Math.sin(init_angle)*80;ctxfs.beginPath();ctxfs.translate(small_x,0);ctxfs.arc(170,20,10,0,Math.PI*2);ctxfs.closePath();ctxfs.fill();ctxfs.restore();//第四個(gè) ctxfs.save();ctxfs.translate(500,1100);ctxfs.fillStyle = "red";ctxfs.beginPath();ctxfs.arc(300,0,70,0,Math.PI*2,false);ctxfs.closePath();ctxfs.fill();var small_x = Math.cos(init_angle)*80;var small_y = Math.sin(init_angle)*80;ctxfs.beginPath();ctxfs.translate(small_x,0);ctxfs.arc(170,20,10,0,Math.PI*2);ctxfs.closePath();ctxfs.fill();ctxfs.restore();init_angle = init_angle + unit_angle;window.requestAnimationFrame(draw);}//自執(zhí)行函數(shù) (function(){draw();})(); </script> </html> View Code

轉(zhuǎn)載于:https://www.cnblogs.com/weibanggang/p/11364010.html

總結(jié)

以上是生活随笔為你收集整理的使用canvas实现360水球波动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。