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

showRatingStars

/**

* 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*/

functionshowRatingStars(myCanvas, rating, counts, size, style) {//检测rating与star数目是否合适

if(rating>counts) {

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

}//检测大小设置是否合适

if(myCanvas.offsetWidth

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

}varcontext=myCanvas.getContext('2d');varxStart=rating*size;varyStart= 0;varxEnd=(Math.ceil(rating)+ 1)*size;varyEnd= 0;varradius=size/ 2;//线性渐变，由左至右

varlinear=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的顶点坐标

varx=radius,

y= 0;for(vari= 0; i

context.beginPath();varx1=size*Math.sin(Math.PI/ 10);varh1=size*Math.cos(Math.PI/ 10);varx2=radius;varh2=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);

}

}//参数设置与函数调用

varsize= 25;varrating= 4.57;varcounts= 10;varstyle={

borderColor:"#21DEEF",

fillColor:"#21DEEF",

spaceColor:"#FFFFFF"};varmyCanvas=document.getElementById("myCanvas");

showRatingStars(myCanvas, rating, counts, size, style);