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);
