javascript写字技巧_js canvas实现写字动画效果

本文实例为大家分享了js canvas实现写字动画效果展示的具体代码，供大家参考，具体内容如下

页面html：

学写一个字

content=" height = device-height,

width = device-width,

initial-scale = 1.0,

minimum-scale = 1.0,

maximum-scale = 1.0,

user-scalable = no"/> //兼容移动端

您的浏览器不支持canvas

//写字区域

清 除

页面css：

#canvas{

display:block;

margin:0 auto;

}

#controller{

margin:0 auto;

}

.op_btn{

float: right;

margin:10px 0 0 10px;

border:2px solid #aaa;

width:80px;

height:40px;

line-height:40px;

font-size:20px;

text-align:center;

border-radius: 5px 5px;

cursor:pointer;

background-color: white;

font-weight:bold;

font-family: Microsoft Yahei, Arial;

}

.op_btn:hover{

background-color:#def;

}

.clearfix{

clear:both;

}

.color_btn{

float: left;

margin: 10px 10px 0 0;

border:5px solid white;

width:40px;

height:40px;

border-radius: 5px 5px;

cursor:pointer;

}

.color_btn:hover{

border: 5px solid violet;

}

.color_btn_s