<html>
<head>
<meta charset="utf-8">
<title>
level
</title>
<style>
#list{
margin:0 auto
width:200px
display:block
list-style:none
}
li{
float:left
cursor:pointer
}
</style>
<script>
onload = function(){
var lis = list.getElementsByTagName("li")
for(var i = 0 i < lis.length i++){
(function(i){
lis[i].onmouseover = function(){
for(var j = 0 j <= i j++){
lis[j].innerHTML = "△"
}
for(var j = i + 1 j < lis.length j++){
lis[j].innerHTML = "☆"
}
}
})(i)
}
document.onmouseover = function(e){
e = e || window.event
var ta = e.target || e.srcElement || e.toElement
if(ta.tagName.toLowerCase() != "li"){
for(var i = 0 i < lis.length i++){
lis[i].innerHTML = "☆"
}
}
return false
}
}
</script>
</head>
<body>
<ul id="list">
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
</ul>
</body>
</html>
打开paintcode，绘制一个漏空的星星体现：操作为：创建canvas 大小30 * 30；修改名称为Star；绘制一个矩形 30 * 30；绘制一个星星 30 * 30 ，星星弧度改为55 %；选中矩形和星星，点击difference，变成bezier 曲线。
接下来，我们添加一个新的canvas，绘制我们需要的控件。
操作为：创建星星评分canvas 150 * 30；创建背景矩形 150 * 30；创建填充矩形 100 * 30；放置5个第一步中绘制的漏空的星星到canvas 上，5个星星组成一个group；然后就可以看到我们想要的视图基本已经出来了。
下一步：将我们画好的生成style文件加入到我们的工程中
先创建一个新的空白工程，添加一个自定义的类ScoreStarsView 继承自UIView
操作为点击paintcode 的file- export 生成stylekit文件放到我们新建的工程下，然后打开xcode ，添加生成是ScoreStarsKit 文件。然后在自定义的ScoreStarsView 类中导入kit，然后在drawRect 进行绘制。最后在storyboard中添加uiview ，把这个view的类改成ScoreStarsView；然后模拟器运行。
