加速球样式
?
直接上碼?
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>精靈球</title><style type="text/css">#c {margin: 0 auto;display: block;width: 170px;height: 170px;}#r {display: block;margin: 0 auto;/*display: none;*/}#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 = 340;var mH = canvas.height = 340;var lineWidth = 2;//圓屬性var r = mH / 2; //圓心var cR = r - 16 * lineWidth; //圓半徑var circleColor="#1080d0";var waterColor="#1c86d1";ctx.lineWidth = lineWidth;/*畫圈函數*/var drawCircle = function() {ctx.beginPath();ctx.strokeStyle = circleColor;ctx.arc(r, r, cR, 0, 2 * Math.PI);ctx.stroke();ctx.beginPath();ctx.arc(r, r, cR-8, 0, 2 * Math.PI);ctx.clip(); //裁剪}//Sin 曲線屬性var sX = 0;var sY = mH / 2;var axisLength = mW; //軸長 ==> 可見的x軸的長度var waveWidth = 0.015; //波浪寬度,數越小越寬 ==>周期var waveHeight = 7; //波浪高度,數越大越高 ==>振幅var speed = 0.09; //波浪速度，數越大速度越快var xOffset = 0; //波浪x偏移量 var IsdrawCircled = false;//畫sin 曲線函數var drawSin = function(xOffset) {ctx.save();// var points = []; //用于存放繪制Sin曲線的點ctx.beginPath();//在整個軸長上取點for (var x = 0; x < axisLength; x += 10/axisLength) {//此處坐標(x,y)的取點，依靠公式 “振幅高*sin(x*振幅寬 + 振幅偏移量)==> y=Asin(wx+t）var y = -Math.sin( 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(0, mH);// ctx.lineTo(points[0][0], points[0][1]);var gradient = ctx.createLinearGradient(0, 250, 0, 0);gradient.addColorStop("0", "#3083ec");gradient.addColorStop("0.5", "#2cc8ec");gradient.addColorStop("1.0", "#15feff");ctx.fillStyle = gradient;// ctx.fillStyle = waterColor;ctx.shadowBlur=5;ctx.shadowColor="#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 ="hsl(210,100%,"+(nowRange/2+50)+"%)";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(); //開始畫圓IsdrawCircled = true;}/* 遍歷+1 */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>?附上我的靈感來源?
<!DOCTYPE html> <html><head><title></title> </head> <style type="text/css" media="screen">#joking {width: 500px;height: 300px;} </style><body><canvas id="joking"></canvas> </body> <!-- y=Asin(wx+t） --> <script type="text/javascript"> var c = document.querySelector('#joking'); var ctx = c.getContext('2d'); /*sin函數*/ var wid = c.width = 250; var hei = c.height = 250; var y, a = 12,w = 1 / 10,cha = 70;speed = 1;function aim() {ctx.clearRect(0, 0, wid, hei);ctx.beginPath();for (var x = 0; x <= wid; x += 1 / wid) {y = Math.sin(x * w + speed) * a + cha;ctx.lineTo(x, y);}ctx.lineTo(wid, hei)ctx.lineTo(0, hei);ctx.lineWidth = '1';var gradient = ctx.createLinearGradient(0, 250, 0, 0);gradient.addColorStop("0", "#3083ec");gradient.addColorStop("0.5", "#2cc8ec");gradient.addColorStop("1.0", "#15feff");ctx.strokeStyle = '#15feff';ctx.fillStyle = gradient;ctx.fill();ctx.restore();ctx.stroke();speed += 0.2;requestAnimationFrame(aim); } aim(); </script></html>? ?這里的鏈接可以觀看效果而且代碼也是最終版的！?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
總結
- 上一篇： MYSQL中最基础的的聚合函数（重点！）
- 下一篇： 非会员只能试看20分钟_做欧包都要把铁锅