如何用纯代码实现评分星级显示？

由于做的一个页面需要根据用户评分的不同，显示对应的star。如果评分是带有小数部分的的话，star除了显示对应整数个star，还需要用star部分“亮起”来显示小数部分（如下图）。本来页面是基于BootStrap做的，里面有star icon，可以整个显示，无论用元素遮蔽还是其他方法，都不能很好的满足需求。而网络上现有实现方式使用的是雪碧图，也就是半颗星亮起时是用图片展示的。经过思考，就想起了HTML5中的Canvas，使用Canvas画出star，然后在填充颜色时使用渐变色，应该就可以实现star部分点亮了。

下面就是具体的实现方式，已经把实现封装成了一个函数，使用时直接传参调用就行啦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Jeri qcloud.js@gmail.com" />
    <title>showRatingStars</title>
</head>
<body> 
    <canvas width="250" height="40" id="myCanvas"></canvas>  

    <script>  
        /**
         * showRatingStars 显示评分星级
         * @param  {Object} myCanvas 画布对象
         * @param  {Number} rating   评分
         * @param  {Number} counts   star个数
         * @param  {Number} size     star大小
         * @param  {Object} style    star样式
         *           Example: style = {
         *                          borderColor:"#21DEEF",
         *                          fillColor:"#21DEEF",
         *                        spaceColor:"#FFFFFF"
         *                      }
         * @return none 
         */
        function showRatingStars(myCanvas, rating, counts, size, style) {

            // 检测rating与star数目是否合适
            if (rating > counts) {

                alert("Please set suitable rating and counts!");
                return;
            }

            // 检测大小设置是否合适
            if (myCanvas.offsetWidth < size * counts || myCanvas.offsetHeight < size) {

                alert("Please set suitable size and myCanvas' size!");
                return;
            }

            var context = myCanvas.getContext('2d');
            var xStart = rating * size;
            var yStart = 0;
            var xEnd = (Math.ceil(rating) + 1) * size;
            var yEnd = 0;
            var radius = size / 2;

            // 线性渐变，由左至右
            var linear = context.createLinearGradient(xStart, yStart, xEnd, yEnd);
            linear.addColorStop(0, style.fillColor);
            linear.addColorStop(0.01, style.spaceColor);
            linear.addColorStop(1, style.spaceColor);
            context.fillStyle = linear;

            // star边框颜色设置
            context.strokeStyle = style.borderColor;
            context.lineWidth = 1;

            // 绘制star的顶点坐标   
            var x = radius,
                y = 0;

            for (var i = 0; i < counts; i++) {

                // star绘制
                context.beginPath();
                var x1 = size * Math.sin(Math.PI / 10);
                var h1 = size * Math.cos(Math.PI / 10);
                var x2 = radius;
                var h2 = radius * Math.tan(Math.PI / 5);
                context.lineTo(x + x1, y + h1);
                context.lineTo(x - radius, y + h2);
                context.lineTo(x + radius, y + h2);
                context.lineTo(x - x1, y + h1);
                context.lineTo(x - x1, y + h1);
                context.lineTo(x, y);
                context.closePath();
                context.stroke();
                context.fill();
                x = (i + 1.5) * size;
                y = 0;
                context.moveTo(x, y);
            }
        }

        // 参数设置与函数调用
        var size = 25;
        var rating = 4.57;
        var counts = 10;
        var style = {
            borderColor: "#21DEEF",
            fillColor: "#21DEEF",
            spaceColor: "#FFFFFF"
        };
        var myCanvas = document.getElementById("myCanvas");

        showRatingStars(myCanvas, rating, counts, size, style);
    </script>  
</body>  
</html>

运行结果如图：

注：示例已经进行了简单测试，是可以正常运行的。但不敢保证是否还有bug，仅供参考与交流！

posted @ 2016-03-04 16:29 默语阅读(3779) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2015-03-04 奇妙的CSS之伪类与伪元素

默语

好好学习，天天向上。

如何用纯代码实现评分星级显示？

公告

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论