canvas畫布效果程式碼

antzone發表於2017-03-15
Canvas

本章節分享一段程式碼例項，實現了簡單的畫布效果，具有畫布的基本簡單功能，當然距離真正的實際應用還是很有差距的，不過可以作為參考學習之用，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<style type="text/css">
/*橡皮樣式*/
#eraseImg{ 
  border:solid;
  color:gray;
  border-radius:118px;
  width:5px;
  height:5px;
  position:absolute;
  display:none;
}
/*橡皮大小單選按鈕組的排列，此div不單獨佔一行*/
.eraseSeries{ 
  display:inline-block;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
var c;//獲取到的2d畫板 
var painting = false;//判斷是否正在繪畫，即滑鼠左鍵是否長按下去 
var canvas;//畫板 
$(function(){ 
  $(".eraseSeries").hide();//初始狀態單選按鈕組隱藏 
 
  canvas=document.getElementById("myCanvas"); 
  c=canvas.getContext("2d"); 
  c.lineCap="round";//設定筆跡邊角，否則筆跡會出現斷層 
  c.strokeStyle="black";//筆跡的顏色 
  c.lineWidth=5;//筆跡的粗細 
  $("#color").change(function(){//筆跡顏色發生改變時 
    //處在擦皮狀態 
    if(eraseFlag==true){ 
      $("#erase").trigger("click");//自動觸發橡皮的點選事件，以返回到畫筆狀態 
    } 
    c.strokeStyle=$(this).val();//設定畫筆狀態 
    c.lineWidth=$(this).val(); 
  }); 
 
  $("#fontSize").change(function(){//畫筆粗細發生改變
    //同上  
    if(eraseFlag==true){ 
      $("#erase").trigger("click"); 
    } 
    c.lineWidth=$(this).val(); 
    c.strokeStyle=$("#color").val(); 
    //eraseFlag=false; 
  }); 
 
  $(".eraseSeries").click(function(){//橡皮大小發生改變 
    var size=$('input[name="eraseSize"]:checked').val();//獲取到橡皮單選按鈕組的選中值 
    sizeE=size;//將該值傳到全域性變數上，sizeE需要用來控制橡皮樣式的位置 
    c.lineWidth=size; 
    $("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮樣式大小發生改變 
  }); 
 
  $("#erase").toggle(function(){//橡皮按鈕的點選翻轉事件 
    c.save();//保持上次設定的狀態 
    eraseFlag=true; 
    c.strokeStyle="white"; 
 
    $("#erase").text("畫筆");//改變按鈕上的文字 
    $(".eraseSeries").show('fast');//橡皮單選組出現 
    sizeE=5; 
  },function(){ 
    eraseFlag=false; 
    $("#erase").text("橡皮"); 
    $(".eraseSeries").hide('fast'); 
    c.restore();//恢復上次畫筆的狀態（包括顏色，粗細等） 
  }); 
}); 
 
var p_x;//上次滑鼠位置 
var p_y; 
var p_x_now;//當前瞬間滑鼠位置 
var p_y_now; 
var eraseFlag=false; 
var sizeE;//橡皮大小 
 
$(document).mousedown(function(e){//滑鼠按下觸發事件 
  // alert(sizeE); 
  p_x= e.clientX;//獲取位置，並置為上次滑鼠位置 
  p_y= e.clientY; 
  painting = true;//畫筆啟動標誌 
}); 
$(document).mousemove(function(e){//滑鼠移動觸發事件
  //橡皮處在啟用狀態，並且滑鼠Y的位置大於30，也即滑鼠在畫板內  
  if(eraseFlag==true&& e.clientY>30){ 
    //橡皮影像跟隨滑鼠而動 
    $("#eraseImg").animate({left:e.clientX-sizeE+"px",top:e.clientY-sizeE+"px"},0).show('fast'); 
  } 
  else{ 
    $("#eraseImg").hide('fast'); 
  } 
  //處於畫筆啟用狀態 
  if(painting==true){ 
    p_x_now= e.clientX;//當前瞬間的滑鼠位置 
    p_y_now= e.clientY; 
    c.beginPath();//開始路徑 
    //曲線是由一段段非常小的直線構成，計算機運算速度很快，這是一種以直線迭代畫曲線的方式 
    c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移動到起始點 
    c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//從起始點畫直線到終點 
 
    c.stroke(); 
    c.closePath();//封閉路徑，這個很重要，如果路徑不封閉， 
    // 那麼只要canvas顏色發生改變，所有的之前畫過的顏色都發生改變 
    p_x = p_x_now;//一次迭代後講當前的瞬間座標值賦給上次滑鼠座標值 
    p_y = p_y_now; 
  } 
}); 
 
$(document).mouseup(function(e){//滑鼠鬆開觸發事件 
  painting=false;//凍結畫筆 
}); 
</script>
</head>
<body>
<div >
  <select id="color" >
    <!--畫筆顏色-->
    <option class="opt" value="red">紅色</option>
    <option class="opt" value="yellow">黃色</option>
    <option class="opt" value="blue">藍色</option>
    <option class="opt" value="black" selected>黑色</option>
    <option class="opt" value="green">綠色</option>
  </select>
  <select id="fontSize">
    <!--畫筆大小-->
    <option value=5 selected>5</option>
    <option value=10>10</option>
    <option value=15>15</option>
    <option value=20>20</option>
    <option value=30>30</option>
  </select>
  <button id="erase">擦皮</button>
  <!--橡皮按鈕-->
  <div class="eraseSeries"> <!--橡皮大小-->
    <input type="radio" name="eraseSize" value="5" checked/>5
    <input type="radio" name="eraseSize" value="10"/>10
    <input type="radio" name="eraseSize" value="15"/>15
    <input type="radio" name="eraseSize" value="20"/>20
    <input type="radio" name="eraseSize" value="30"/>30 
  </div>
</div>
 
<!--<button id="btn">btn</button>-->
<!--整個畫布-->
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas>
<!--橡皮形狀-->
<div id="eraseImg"></div>
</body>
</html>

相關文章