showRatingStars

/**

* showRatingStars 顯示評分星級

* @param {Object} myCanvas 畫布對象

* @param {Number} rating 評分

* @param {Number} counts star個數(shù)

* @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數(shù)目是否合適

if(rating>counts) {

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

}//檢測大小設(shè)置是否合適

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邊框顏色設(shè)置

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

}

}//參數(shù)設(shè)置與函數(shù)調(diào)用

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

borderColor:"#21DEEF",

fillColor:"#21DEEF",

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

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

總結(jié)

以上是生活随笔為你收集整理的bootstrap五星评分_如何用纯代码实现评分星级显示？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。