快捷導(dǎo)航

原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能示例

更新時間：2018年08月30日 10:10:34 作者：永遠(yuǎn)在追求

這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動態(tài)操作頁面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能。分享給大家供大家參考，具體如下：

前面一篇介紹了《JS+HTML5 Canvas實(shí)現(xiàn)簡單的寫字板功能》，這里再介紹另一種實(shí)現(xiàn)方法。首先來看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>m.fzitv.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>線條粗細(xì)：</strong>0<input type="range" id="ranges" min="0" max="20" onchange="changeW()" value="3"/>20
</div>
<script type="text/javascript">
//初始化區(qū)
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;
//設(shè)置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");
//設(shè)置米字格子
//開始繪制前設(shè)置基本樣式
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;//將鼠標(biāo)原點(diǎn)化為畫布原點(diǎn)
  var cly=e.clientY-cans.getBoundingClientRect().top;
  curmousePos={x:clx,y:cly};
  if(down){
  //開始畫
  //設(shè)置畫筆顏色、粗細(xì)等
  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;
  }
 }
 //鼠標(biāo)按下事件
 cans.onmousedown=function(e){
  var e=e||event;
  e.preventDefault();
  lastmousePos=curmousePos
  down=true;
 }
 //鼠標(biāo)松開事件
 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()
     //恢復(fù)原狀
      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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，親身體驗(yàn)一下運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: