原生JS+HTML5实现的可调节写字板功能示例

本文实例讲述了原生JS+HTML5实现的可调节写字板功能。分享给大家供大家参考，具体如下：

前面一篇介绍了《JS+HTML5 Canvas实现简单的写字板功能》，这里再介绍另一种实现方法。首先来看看运行效果：

具体代码如下：

#cans{
display: block;
margin: 0 auto;
}
#selectColor{
 margin: 0 auto;
   width: 400px;

 text-align: center;
 margin-top: 10px;
 list-style: none;
}
.all{

width: 60px;
height: 50px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 10px;
border-radius:6px ;
cursor: pointer;
}
#red{
background-color: red;
}
#yellow{
background: yellow;
}
#black{
background: black;
}
#green{
background: green;
}
#blue{
background: #0000FF;
}
#clear{
margin-left: 10px;
}
#fontW{
width: 400px;
margin: 0 auto;
}




您的浏览器不支持该功能！









 




线条粗细：020