怎么在css上不用canvas画一个星星

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>

这个由浏览器默认设定，不同的浏览器不一样，有的浏览器是黑色圆点，有的浏览器是星号，不可以修改。除非你自己用代码实现这样的功能，没有说哪个属性或样式一设置就可以这么简单。

自己实现可以用js的replace或者用html5的placeholder之类的东西来实现。思路是将用户输入的东西复制到另外一个隐藏元素中。同时修改可见的输入框的内容。

---