Canvas制作动态进度加载水球
生活随笔
收集整理的這篇文章主要介紹了
Canvas制作动态进度加载水球
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
之前看到一些球型的動態加載的效果，一直想自己動手做一個，正好這段時間重溫了一個Canvas，所以就嘗試了一下。
樣式預覽
height="342" width="100%" scrolling="no" title="動態進度水球" src="//codepen.io/lecein/embed/dOKrmr/?height=342&theme-id=0&default-tab=result" allowfullscreen="true">實現思路
關于水波的實現，使用了sin()函數，通過每一幀不斷的移動sin()函數曲線，實現水波動態效果。然后，通過繪制圓形路徑，進行clip()，實現球型效果。
sin()函數相關
這里說一下sin()函數的相關基礎，對于繪制水波的影響。
看一下圖，回顧一下中學sin()函數的基礎。
從圖中可以看出，當函數為sin(x)時，值域為[-1, 1]，周期為2π。
當sin(x)乘以一個數，可以改變值域，也就是峰值，如下圖：
系數大于1時曲線更陡峭，小于1大于0時曲線更緩。
當sin(x ± 某個數)時，實現曲線的左右移動，減時右移，加時左移。
當sin(x * 某個數)時，曲線的周期會變化，某個數大于1時，周期變短；某個數小于1大于0時，周期變長。
在一點，sin()是一個周期函數，所以只要不斷的給它值，它就會周期變化。
好了，sin()的數學基礎差不多了，接下來開始步入正題。
繪制 sin() 曲線
var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d');//畫布屬性 var mW = canvas.width = 700; var mH = canvas.height = 300; var lineWidth = 1;//Sin 曲線屬性 var sX = 0; var sY = mH / 2; var axisLength = mW; //軸長 var waveWidth = 0.011 ; //波浪寬度,數越小越寬 var waveHeight = 70; //波浪高度,數越大越高ctx.lineWidth = lineWidth;//畫sin 曲線函數 var drawSin = function(xOffset){ctx.save();var points=[]; //用于存放繪制Sin曲線的點ctx.beginPath();//在整個軸長上取點for(var x = sX; x < sX + axisLength; x += 20 / axisLength){//此處坐標(x,y)的取點，依靠公式 “振幅高*sin(x*振幅寬 + 振幅偏移量)”var y = -Math.sin((sX + x) * waveWidth);points.push([x, sY + y * waveHeight]);ctx.lineTo(x, sY + y * waveHeight); }//封閉路徑ctx.lineTo(axisLength, mH);ctx.lineTo(sX, mH);ctx.lineTo(points[0][0],points[0][1]);ctx.stroke()ctx.restore(); }; drawSin()此處通過waveWidth和waveHeight調節曲線的陡峭度和周期。
加入動態效果
var speed = 0.04; //波浪速度，數越大速度越快 var xOffset = 0; //波浪x偏移量速度變量和x偏移變量
var y = -Math.sin((sX + x) * waveWidth + xOffset);修改y點的函數。
var render = function(){ctx.clearRect(0, 0, mW, mH);drawSin(xOffset);xOffset += speed; //形成動態效果requestAnimationFrame(render); }render()加入渲染。
百分比控制
因為要加入百分比不同的漲幅效果，所以要對y的坐標時行百分比控制修改。
var dY = mH * (1 - nowRange / 100 );球型顯示
這里需要用到clip()進行球型裁切顯示。
ctx.beginPath(); ctx.arc(r, r, cR, 0, 2 * Math.PI); ctx.clip();其他
可以通過修改如下變量來修改曲線的形狀以及速度：
var waveWidth = 0.015 ; //波浪寬度,數越小越寬 var waveHeight = 6; //波浪高度,數越大越高 var speed = 0.09; //波浪速度，數越大速度越快完整代碼
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" /><title>Document</title><style type="text/css">#c{margin: 0 auto;display: block;}#r{display: block;margin: 0 auto;}#r::before{color: black;content: attr(min);padding-right: 10px;}#r::after{color: black;content: attr(max);padding-left: 10px;} </style> </head> <body><canvas id="c"></canvas><input type="range" id="r" min="0" max="100" step="1"><script type="text/javascript">var canvas = document.getElementById('c');var ctx = canvas.getContext('2d');var range = document.getElementById('r');//range控件信息var rangeValue = range.value;var nowRange = 0; //用于做一個臨時的range//畫布屬性var mW = canvas.width = 250;var mH = canvas.height = 250;var lineWidth = 2;//圓屬性var r = mH / 2; //圓心var cR = r - 16 * lineWidth; //圓半徑//Sin 曲線屬性var sX = 0;var sY = mH / 2;var axisLength = mW; //軸長var waveWidth = 0.015 ; //波浪寬度,數越小越寬 var waveHeight = 6; //波浪高度,數越大越高var speed = 0.09; //波浪速度，數越大速度越快var xOffset = 0; //波浪x偏移量ctx.lineWidth = lineWidth;//畫圈函數var IsdrawCircled = false;var drawCircle = function(){ctx.beginPath();ctx.strokeStyle = '#1080d0';ctx.arc(r, r, cR+5, 0, 2 * Math.PI);ctx.stroke();ctx.beginPath();ctx.arc(r, r, cR, 0, 2 * Math.PI);ctx.clip();}//畫sin 曲線函數var drawSin = function(xOffset){ctx.save();var points=[]; //用于存放繪制Sin曲線的點ctx.beginPath();//在整個軸長上取點for(var x = sX; x < sX + axisLength; x += 20 / axisLength){//此處坐標(x,y)的取點，依靠公式 “振幅高*sin(x*振幅寬 + 振幅偏移量)”var y = -Math.sin((sX + x) * waveWidth + xOffset);var dY = mH * (1 - nowRange / 100 );points.push([x, dY + y * waveHeight]);ctx.lineTo(x, dY + y * waveHeight); }//封閉路徑ctx.lineTo(axisLength, mH);ctx.lineTo(sX, mH);ctx.lineTo(points[0][0],points[0][1]);ctx.fillStyle = '#1c86d1';ctx.fill();ctx.restore();};//寫百分比文本函數var drawText = function(){ctx.save();var size = 0.4*cR;ctx.font = size + 'px Microsoft Yahei';ctx.textAlign = 'center';ctx.fillStyle = "rgba(06, 85, 128, 0.8)";ctx.fillText(~~nowRange + '%', r, r + size / 2);ctx.restore();};var render = function(){ctx.clearRect(0, 0, mW, mH);rangeValue = range.value;if(IsdrawCircled == false){drawCircle(); }if(nowRange <= rangeValue){var tmp = 1;nowRange += tmp;}if(nowRange > rangeValue){var tmp = 1;nowRange -= tmp;}drawSin(xOffset);drawText(); xOffset += speed;requestAnimationFrame(render);}render(); </script> </body> </html>效果
博客名稱：王樂平博客
博客地址：http://blog.lepingde.com
CSDN博客地址：http://blog.csdn.net/lecepin
總結
以上是生活随笔為你收集整理的Canvas制作动态进度加载水球的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle alter system
- 下一篇： 如何将Eclipse设置为中文版