canvas仿芝麻信用分仪表盘
<p>这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘。</p> <p>首先, 上原图:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4f64b928b2710b4ad3f438d5b8d6a663.png"></p> <p>这个是在下支付宝上的截图,分低各位见笑了。然后看下我用canvas实现的效果图:</p> <pre> <code class="language-javascript"><canvas id="canvas" width="400" height="700" data-score='724'></canvas> <!-- 设置data-score,分数区间[400, 900] --> </code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/15edc230b87dcc3ff3162bd8af25aadd.gif"></p> <p>唉,总感觉不像。这个是GIF图,可能在网页上打开的效果会好一点(</p> <p>当然可能就是这样</p> <p>)。大家可以点击底部预览codepen上的演示。有两个不完美的地方,一个是实际上芝麻信用表盘上的的刻度是不均匀的,我这为了简单的实现就采取相同的刻度;二是表盘上运动的点是有模糊的效果,还没解决。唉,下次再说吧。</p> <p>接下来还是来说说怎么实现的吧。第一步,国际惯例,创建画布:</p> <pre> <code class="language-javascript">var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), cWidth = canvas.width, cHeight = canvas.height; </code></pre> <p>然后绘制表盘,虽说不是处女座,但也要尽可能做到跟原图上的一样,那就是这个环形开口的角度是多少呢?请上ps来测一下:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fb2944e0f94c154c4c844bfb67be35f9.png"></p> <p>嗯,136°,这个角度确实刁钻,为了方便接下来的计算,那就约等于140°。那么一个分数段的弧度就是:</p> <pre> <code class="language-javascript">var deg1 = Math.PI * 11 / 45 </code></pre> <p>先把中间半透明的刻度层画好:</p> <pre> <code class="language-javascript">ctx.save(); //中间刻度层 ctx.beginPath(); ctx.strokeStyle = 'rgba(255, 255, 255, .2)'; ctx.lineWidth = 10; ctx.arc(0, 0, 135, 0, 11 * deg0, false); ctx.stroke(); ctx.restore(); </code></pre> <p>接着,画6条刻度线,用for循环来实现:</p> <pre> <code class="language-javascript">ctx.save(); // 刻度线 for (var i = 0; i < 6; i++) { ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(255, 255, 255, .3)'; ctx.moveTo(140, 0); ctx.lineTo(130, 0); ctx.stroke(); ctx.rotate(deg1); } ctx.restore(); </code></pre> <p>同理,再把大刻度细分为5个小刻度:</p> <pre> <code class="language-javascript">ctx.save(); // 细分刻度线 for (i = 0; i < 25; i++) { if (i % 5 !== 0){ ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(255, 255, 255, .1)'; ctx.moveTo(140, 0); ctx.lineTo(133, 0); ctx.stroke(); } ctx.rotate(deg1 / 5); } ctx.restore(); </code></pre> <p>刻度到这里就ok了,还需要给刻度标上文字和每个分数段的信用级别,具体的参见代码,因为跟刻度实现的原理差不多,就不啰嗦了。现在最关键就是实现表盘上那个运动的点(不知道怎么称呼,下文就叫它动点),我们可以这样想,它是个半径很小的圆,只不过是画在最外层环形轨道上圆,而圆在 canvas 上的实现方法是:</p> <pre> <code class="language-javascript">ctx.arc(x, y, radius, sAngle, eAngle, false); </code></pre> <p>我们只要控制x, y就能让它动起来,实现我们想要的效果。so,创建一个动点对象:</p> <pre> <code class="language-javascript">function Dot() { this.x = 0; this.y = 0; this.draw = function (ctx) { ctx.save(); ctx.beginPath(); ctx.fillStyle = 'rgba(255, 255, 255, .7)'; ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false); ctx.fill(); ctx.restore(); }; } var dot = new Dot(), dotSpeed = 0.03, //控制动点的速度 angle = 0, //这个很关键,用来得到动点的坐标x, y credit = 400; //信用最低分数 </code></pre> <p>如何得到dot的坐标x, y呢?那就要用到传说中三角函数了。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e4aa3e589e3eed1c82dc786b8bc4bd63.png"></p> <p>通过上图我们可以得到</p> <pre> <code class="language-javascript">x = r * cos(angle), y = r * sin(angle) </code></pre> <p>在JavaScript中,dot的中心坐标就变成了:</p> <pre> <code class="language-javascript">dot.x = radius * Math.cos(angle); //radius为最外层轨道的半径值 dot.y = radius * Math.sin(angle); </code></pre> <p>接下来我们只要得到这个angle。这个通过弧度与分数的比例关系就可以得到:</p> <pre> <code class="language-javascript">var aim = (score - 400) * deg1 / 100; if (angle < aim) { angle += dotSpeed; } dot.draw(ctx); </code></pre> <p>然后让中间的信用分数也能随动点的转动而变化,创建一个 text() ,为了使数字变化能和动点保持一致,要根据动点的速率来计算数字变化:</p> <pre> <code class="language-javascript">function text(process) { ctx.save(); ctx.rotate(10 * deg0); ctx.fillStyle = '#000'; ctx.font = '80px Microsoft yahei'; ctx.textAlign = 'center'; ctx.textBaseLine = 'top'; ctx.fillText(process, 0 ,10); ctx.restore(); } var textSpeed = Math.round(dotSpeed * 100 / deg1), if (credit < score - textSpeed) { credit += textSpeed; } else if (credit >= score - textSpeed && credit < score) { credit += 1; // 这里确保信用分数最后停下来是我们输入的分数 } text(credit); </code></pre> <p>最后这一切都逃不过让window.requestAnimationFrame()来控制绘制动画和用ctx.clearRect(0, 0, cWidth, cHeight)来清除画布。</p> <p> </p> <p> </p> <p>来自:http://www.cnblogs.com/libin-1/p/6068340.html</p> <p> </p>
本文由用户 rmfi6531 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!