JS+HTML5 Canvas实现简单的写字板功能示例

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

先来看运行效果：

具体代码如下：

    
    
    
    
 body,html {
     padding: 0;
     margin: 0;
 }
 a,div,span {
     font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
 }
 .canvas-box {
     display: block;
     margin: 40px auto;
     background: #f5f5f5;
 }
 .color-box {
     width: 1080px;
     display: block;
     margin: 20px auto;
     text-align: center;
 }
 .color-item {
     display: inline-block;
     vertical-align: middle;
     width: 48px;
     height: 24px;
     margin: 10px;
     background: #989898;
     cursor: pointer;
 }
 .red {
     background: #e01d5b;
 }
 .blue {
     background: #1d6ae0;
 }
 .green {
     background: #1de087;
 }
 .yellow {
     background: #f3e41d;
 }
 .orange {
     background: #f9850b;
 }
 .black {
     background: #333;
 }
 .color-item.active {
     border: solid 3px #565656;
 }
 .btn {
     display: block;
     width: 120px;
     height: 40px;
     line-height: 40px;
     margin: 10px auto;
     text-align: center;
     font-size: 18px;
     border: solid 1px #999;
     border-radius: 5px;
     cursor: pointer;
 }
    


    
    
 
 
 
 
 
 
    
    清除

感兴趣的朋友还可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，亲身体验一下运行效果。

更多关于Javascript相关内容还可查看本站专题：《Javascript+HTML5特效与技巧汇总》、《Javascript图形绘制技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。