欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-11 10:59:34
本文实例讲述了原生js+html5实现的可调节写字板功能。分享给大家供大家参考,具体如下: 前面一篇介绍了《js+html5 canvas实现简单的写字板功能》,这里再介...

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

前面一篇介绍了《js+html5 canvas实现简单的写字板功能》,这里再介绍另一种实现方法。首先来看看运行效果:

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

具体代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net js写字板</title>
<style type="text/css">
#cans{
display: block;
margin: 0 auto;
}
#selectcolor{
 margin: 0 auto;
   width: 400px;
/* height: 50px;*/
 text-align: center;
 margin-top: 10px;
 list-style: none;
}
.all{
/*width: 10%;
height: 95%;*/
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;
}
</style>
</head>
<body>
<canvas id="cans">
您的浏览器不支持该功能!
</canvas>
<ul id="selectcolor">
<li class="all" id="red" onclick="changecolor('red'),ss(this)"></li>
<li class="all" id="yellow" onclick="changecolor('yellow'),ss(this)"></li>
<li class="all" id="black" onclick="changecolor('black'),ss(this)"></li>
<li class="all" id="green" onclick="changecolor('green'),ss(this)"></li>
<li class="all" id="blue" onclick="changecolor('blue'),ss(this)"></li>
</ul></br>
<input id="clear" type="button" value="重画"> <!--<onclick="clears()">-->
</br></br>
<div id="fontw">
<strong>线条粗细:</strong>0<input type="range" id="ranges" min="0" max="20" onchange="changew()" value="3"/>20
</div>
<script type="text/javascript">
//初始化区
var ranges=document.getelementbyid("ranges");
var cans=document.getelementbyid("cans");
var clear=document.getelementbyid("clear");
cans.width=600;
cans.height=600;
var down=false;
var up=false;
var clears1=false;
var lastmousepos={x:0,y:0};
var curmousepos={x:0,y:0};
var lastwidth;
var curwidth=3;
//设置canvas宽高
var canvaswidth=cans.width;
var canvasheight=cans.height;
var half_width=canvaswidth/2;
var half_height=canvasheight/2;
var framew=10;
var linew=1;
//改变线条宽度
function changew(){
curwidth=ranges.value;
}
var drawcol="black";
//改变字体颜色
function changecolor(s){
        drawcol=s;
      }
var cts=cans.getcontext("2d");
//设置米字格子
//开始绘制前设置基本样式
drawcanvs()
function drawcanvs(){
cts.linecap="round"
cts.linejoin="round"
cts.linewidth=framew;
cts.strokestyle="red"
cts.beginpath()
 cts.moveto(0,0);
 cts.lineto(canvaswidth,0);
 cts.lineto(canvaswidth,canvasheight);
 cts.lineto(0,canvasheight);
cts.closepath()
cts.stroke()
//画x
cts.linewidth=linew;
cts.beginpath()
cts.moveto(0,0);
cts.lineto(canvaswidth,canvasheight);
cts.closepath()
cts.stroke()
cts.beginpath()
cts.moveto(canvaswidth,0);
cts.lineto(0,canvasheight);
cts.closepath()
cts.stroke()
cts.beginpath()
cts.moveto(half_width,0);
cts.lineto(half_width,canvasheight);
cts.closepath()
cts.stroke()
cts.beginpath()
cts.moveto(0,half_height);
cts.lineto(canvaswidth,half_height);
cts.closepath()
cts.stroke()
}
 cans.onmousemove=function(e){
  var e=e||event;
  var clx=e.clientx-cans.getboundingclientrect().left;//将鼠标原点化为画布原点
  var cly=e.clienty-cans.getboundingclientrect().top;
  curmousepos={x:clx,y:cly};
  if(down){
  //开始画
  //设置画笔颜色、粗细等
  cts.linecap="round"
  cts.linejoin="round"
  cts.linewidth=curwidth;
  cts.strokestyle=drawcol;
  //开始绘画
  cts.save();
  cts.beginpath();
   cts.moveto(lastmousepos.x,lastmousepos.y);
   cts.lineto(curmousepos.x,curmousepos.y);
  cts.closepath();
  cts.stroke();
  cts.restore();
  lastmousepos=curmousepos;
  }
  if(up){
  down=false;
  up=false;
  }
 }
 //鼠标按下事件
 cans.onmousedown=function(e){
  var e=e||event;
  e.preventdefault();
  lastmousepos=curmousepos
  down=true;
 }
 //鼠标松开事件
 cans.onmouseup=function(e){
  var e=e||event;
  e.preventdefault();
  up=true;
 }
 //计算速度
// function calv(s,t){
//   var v=s/t;
//   if(v<0.1){
//   curwidth=10;
//   }else if(v>10){
//   curwidth=2;
//   }else{
//   curwidth=5
//   }
// }
     function changebg(){
     var all=document.getelementsbyclassname("all");
     for(var i=0;i<all.length;i++){
     all[i].onmouseover=function(){
     this.style.csstext="margin-top:-6px;box-shadow:3px 5px 5px black"
     }
     all[i].onmouseout=function(){
     this.style.csstext="border: 1px solid #cccccc;"
     }
     }
     }
     changebg()
     //恢复原状
      function ss(s){
     s.style.csstext="margin-top:0px;box-shadow:none;"
      }
     //清除方法
     clear.onmousedown=function (){
      cts.clearrect(0,0,cans.width,cans.height);
//     clears1=true;
     }
     //清除后重画
     clear.onmouseup=function(){
      drawcanvs();
     }
</script>
</body>
</html>

感兴趣的朋友还可以使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun测试上述代码,亲身体验一下运行效果。

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

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