使用Canvas製做畫圖工具

  前  言

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; 
            }

 

如需源碼，可戳右側連接自行下載哦~http://www.jredu100.com/index.php?m=content&c=index&a=show&catid=65&id=39

 

 

做者：傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
版權聲明：本文版權歸煙 臺 傑瑞教育 科 技有限公司和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
技術諮詢：