Html
    Css
    Js


 #canvas{display:block;margin:0 auto;}
  	 /*清除器样式*/
  	 #controller{margin: 0 auto;}
  	 .op_btn{float: right;margin: 20px 0 0 0;border: 2px solid #aaa;
  	 	width: 80px;height: 40px;line-height: 40px;font-size: 20px;text-align: center;
  	 	border-radius: 5px;cursor: pointer;background-color: white;
  	 	font-weight: bold;font-family:Arial;}
  	 .op_btn:hover{background: #def;}
  	 .clearfix{clear: both;}
  	 /*颜色按钮*/
  	 .color_btn{
  	 	float: left;
  	 	margin: 16px 0 0 10px;
  	 	border: 5px solid white;
  	 	width: 40px;
  	 	height: 40px;
  	 	border-radius: 5px;
  	 	cursor: pointer;
  	 }
  	 .color_btn:hover{border:5px solid violet;}
  	 /*默认边框*/
  	 .color_btn_selected{border:5px solid blueviolet;}
  	 #black_btn{background-color: black;}
  	 #blue_btn{background-color: blue;}
  	 #green_btn{background-color: green;}
  	 #red_btn{background-color: red;}
  	 #orange_btn{background-color: orange;}
  	 #yellow_btn{background-color: yellow;}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

canvas实现写字效果

h5+canvas实现屏幕写字效果

0