HTML
CSS
显示结果
想要显示不数量的星星时,只要修改 data-rating 的设置值即可。
下方的链接可以直接动手调试
https://codepen.io/kou-kaisei/pen/OJOgwJE
HTML5 中用CANVAS画一个五角星,代码如下:<script type="text/javascript">
function init() {
var ctx = document.getElementById('stars').getContext('2d')
ctx.fillStyle = "#827839"
ctx.shadowColor="#000000"
ctx.shadowOffsetX=6
ctx.shadowOffsetY=6
ctx.shadowBlur=9
ctx.beginPath()
ctx.moveTo(15, 150)
ctx.lineTo(100,140)
ctx.lineTo(170,90)
ctx.lineTo(230,140)
ctx.lineTo(315,150)
ctx.lineTo(230,200)
ctx.lineTo(300,263)
ctx.lineTo(170,233)
ctx.lineTo(30,263)
ctx.lineTo(100,200)
ctx.closePath()
ctx.fill()
}
window.addEventListener('load', init, false)
</script>
<canvas id="stars" width="333" height="300">
Your browser does not support the canvas element .
</canvas>
<div style="position:relativebackground-image:url(你的大五角星图片地址)width:大五角星的宽度height:大五角星的高度"><img src="第一个小五角星地址" style=" position:absoluteleft:20pxtop:20px"/>
<img src="第二个小五角星地址" style=" position:absoluteleft:30pxtop:30px"/>
<img src="第三个小五角星地址" style=" position:absoluteleft:40pxtop:40px"/>
<img src="第四个小五角星地址" style=" position:absoluteleft:50pxtop:50px"/>
</div>
把上面的代码复制到大五角星要放置的位置,那些中文是要你自己改的,小五角星可以自己在dw里面拖动的,大五角星不要拖动哦。