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