前  言

JRedu

　canvas是HTML5中重要的元素之一，canvas元素使用JavaScript在網頁上繪製圖像，畫布是一個矩形區域，我們可以控制其每一個元素，並且canvas擁有多種的繪製路徑、矩形、圓形、字元以及新增影象的方法。 這一章我們使用canvas來做一個畫圖工具，並且支援下載圖片功能。

最終實現介面

最終實現介面如下，當然我這種手殘黨是畫不出來，手動@陳沖老師畫的：

畫圖工具實現的主要功能

1.畫筆顏色和粗細點選選取

2.橡皮擦

3.清除畫布

4.下載圖片

在實現主要功能之前，首先要放置canvas畫布，實現在規定區域內隨意畫圖的功能，實現的原理是獲取滑鼠點選之後的位置，利用滑鼠的點選、移動事件來實現繪畫。實現程式碼如下：

設定全域性變數

var canvas = document.getElementById('canvas');
var cvs = canvas.getContext('2d');  
var drawing =false;

Html程式碼：

<canvas id="canvas" width="800px" height="600px" style="border: 1px solid red;"></canvas>

Js程式碼：

window.onload = function(){
var penWeight = 0;      //畫筆粗細  
var penColor = '';  //
 
畫筆顏色  
canvas.onmousedown = function(e){  
/*找到滑鼠（畫筆）的座標*/  
var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;  
var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;  
cvs.beginPath();    //開始本次繪畫  
cvs.moveTo(start_x, start_y);   //畫筆起始點  
/*設定畫筆屬性*/  
cvs.lineCap = 'round';  
cvs.lineJoin 
 
="round";  
cvs.strokeStyle = penColor;     //畫筆顏色  
cvs.lineWidth = penWeight;      //畫筆粗細  
canvas.onmousemove = function(e){  
      /*找到滑鼠（畫筆）的座標*/  
      var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;  
      var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;   
      cvs.lineTo(move_x, move_y);     //根據滑鼠路徑繪畫  
        cvs.stroke();   //立即渲染  
        }
      canvas.onmouseup = function(e){
            cvs.closePath();    //結束本次繪畫
            canvas.onmousemove = null;  
            canvas.onmouseup = null;  
        }  
        canvas.onmouseleave = function(){
            cvs.closePath();
            canvas.onmousemove = null;  
            canvas.onmouseup = null; 
        }
}
}

1畫筆顏色和粗細點選選取

這裡我分別從畫筆顏色和畫筆粗細中個選取一個作為例子來簡述以下如何實現：

從上邊的程式碼中可以瞭解到控制畫筆粗細和顏色的分別是penWeight和penColor，也就是說，我們可以通過修改這兩個變數從而實現改變畫筆屬性的功能，程式碼如下：

Html程式碼：

<input type="button" value="粗" class="bold btn" onclick="checkpen(10)" />
<input type="button" value="紅" class="red item" style="background-color: red;border: none;" onclick="changecolor('red')"  />

Js程式碼：

function checkpen(width){ //設定筆的粗細
        cvs.lineWidth = width;
    }
    function changecolor(pencolor){ //設定顏色
        cvs.strokeStyle =pencolor;
    }

2橡皮擦

選中橡皮擦之後提示正在使用，利用滑鼠移動，點選事件實現橡皮擦的功能，其中cvs.globalCompositeOperation = "destination-out";  可以實現橡皮擦點選經過的地方顯示原始背景色。程式碼實現如下：

Html程式碼：

<input type="button" value="橡皮擦" class="eraser btn"   id="eraser" onclick="checkeraser()" />
<input type="button" value="取消橡皮擦" class="uneraser btn" id="uneraser" onclick="canceleraser()" />

Js程式碼：

//選中橡皮擦
function checkeraser(){
document.getElementById("eraser").value = "正在使用...";
cvs.lineWidth = 20;
cvs.globalCompositeOperation = "destination-out";  
    function getBoundingClientRect(x,y){
    var box = canvas.getBoundingClientRect(); //獲取canvas的距離瀏覽器視窗的上下左右距離
    return {x:x-box.left,
            y:y-box.top
    }
}
canvas.onmousedown = function(e){
    var first = getBoundingClientRect(e.clientX,e.clientY);
    cvs.save();
    cvs.beginPath();
    cvs.moveTo(first.x,first.y);
    drawing = true;
}
canvas.onmousemove = function(e){
    if(drawing){
        var move = getBoundingClientRect(e.clientX,e.clientY);
        cvs.save();
        cvs.lineTo(move.x,move.y);
        cvs.stroke()
        cvs.restore()
    }
}
canvas.onmouseup = function(){
    drawing = false;
}
canvas.onmouseleave = function(){
    drawing = false;
    canvas.onmouseup();
}
}

3清除畫布

清空畫布只需要呼叫clearRect() 方法，實現清空給定矩形內的指定畫素。程式碼如下： 

Html程式碼：

<input type="button" value="清除畫布" class="clear fun" onclick="clearb()" />

Js程式碼：

//清除畫布功能
    function clearb (){
        cvs.clearRect(0,0,800,800);
}

4下載圖片

下載圖片的部分程式碼和生成畫布實現繪畫的程式碼寫在同一個方法中，一併貼出來了，可以自行刪改。以下是實現程式碼：

Html程式碼：

<input type="button" value="清除畫布" class="clear fun" onclick="clearb()" />

Js程式碼：

//儲存圖片
window.onload = function(){
    var penWeight = 0;      //畫筆粗細  
    var penColor = '';  //畫筆顏色  
    canvas.onmousedown = function(e){  
        /*找到滑鼠（畫筆）的座標*/  
        var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;  
        var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;  
        cvs.beginPath();    //開始本次繪畫  
          cvs.moveTo(start_x, start_y);   //畫筆起始點  
          /*設定畫筆屬性*/  
        cvs.lineCap = 'round';  
        cvs.lineJoin ="round";  
        cvs.strokeStyle = penColor;     //畫筆顏色  
        cvs.lineWidth = penWeight;      //畫筆粗細  
        canvas.onmousemove = function(e){  
              /*找到滑鼠（畫筆）的座標*/  
            var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;  
            var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;  
            cvs.lineTo(move_x, move_y);     //根據滑鼠路徑繪畫  
  
            cvs.stroke();   //立即渲染  
        }  
        canvas.onmouseup = function(e){  
            cvs.closePath();    //結束本次繪畫  
            canvas.onmousemove = null;  
            canvas.onmouseup = null;  
        }  
        canvas.onmouseleave = function(){
            cvs.closePath();
            canvas.onmousemove = null;  
            canvas.onmouseup = null; 
        }
    } 
      var dlButton = document.getElementById("downloadImageBtn");
    bindButtonEvent(dlButton,"click",saveAsLocalImage)
}
function bindButtonEvent(element, type, handler)
            {
                   if(element.addEventListener) {
                      element.addEventListener(type, handler, false);
                   } else {
                      element.attachEvent('on'+type, handler);
                   }
            }
  function saveAsLocalImage () {
                var myCanvas = document.getElementById("canvas");
                var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
                window.location.href=image; 
            }

技有限公司和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。
技術諮詢：