canvas實現畫板功能

需求分析 
1.具有基本的鉛筆功能 
2.即時直線繪製 
3.即時繪製矩形 
4.即時圓形 
5.即時橡皮擦 
7.插入圖片 
8.把畫板儲存為圖片並下載 //此處還沒做好，畫板底色是黑色的 
9.選擇顏色 
10.選擇線條粗細

Setp1:構建網頁基本樣式

html程式碼

    <!--可選操作-->
    <div id="select">
        <button id="pen">鉛筆</button>
        <button id="line">直線</button>
        <button
 
 id="rect">矩形</button>
        <button id="arc">圓形</button>
        <button id="robber">橡皮檫</button>
        <button id="img">圖片</button>
        <button id="save">儲存</button>
        <input type="file" id="file" name="img" style="display: none"
 
/>
        <input type="color" id="color"/>
        <input type="number" id="lineWidth"/>
    </div>

    <!--畫板-->
    <canvas id="penal" width="800" height="800"></canvas>

css程式碼

    /*只有一句，用來初始化畫板顏色*/
    #penal {
        width: 800px;
        height: 800px;
        background-color
 
: #ccc;
    }

Step2:構造實現畫板各個功能的js程式碼

1.構造Draw()類，並初始化必要的引數

    var Draw = function(){
        this.type = 'pen';  //選項型別，預設為鉛筆
        this.penal = document.getElementById('penal');
        this.pen = this.penal.getContext('2d');
        this.isDraw = false;    //繪畫開關
        this.color = document.getElementById('color');
        this.lineWidth = document.getElementById('lineWidth');
        this.select = document.getElementById('select');    //選擇面板
        this.img = new Image();//用於動態繪製直線，矩形，圓形
    };

2.這裡只需要構造一個初始化函式init()

初始化函式內部需要用到的變數

    Draw.prototype.init = function(){
        var self = this;
        var originX = null;
        var originY = null;
    }

先繫結選擇操作

    this.select.addEventListener('click',function(event){
        if(event.target.id == 'pen'){
            self.type = 'pen';
        }else if(event.target.id == 'line'){
            self.type = 'line';
        }else if(event.target.id == 'rect'){
            self.type = 'rect';
        }else if(event.target.id == 'arc'){
            self.type = 'arc';
        }else if(event.target.id == 'robber'){
            self.type = 'robber';
        }else if(event.target.id == 'img'){
            document.getElementById('file').click();    //預設觸發選擇檔案操作
            document.getElementById('file').onchange = function(e){
                var reader = new FileReader();          //這是H5新增加的讀取檔案函式
                reader.readAsDataURL(e.target.files[0]);
                reader.onload = function(ent){          //檔案讀取完畢後觸發操作
                    var img = new Image();
                    img.src = ent.target.result;        //讀取的結果預設存放在result上
                    self.pen.drawImage(img,0,0);        //把圖片直接畫在畫布上
                }
            }
        }
        else if(event.target.id == 'save'){
            var a = document.createElement('a');
            a.href = self.penal.toDataURL('image/png');     //把畫布轉化為base64
            a.download = 'image.jpeg';
            a.id = 'download';
            a.innerHTML = 'download';
            document.body.appendChild(a);
            document.getElementById('download').style.display = 'none';
            document.getElementById('download').click();    //默認出發下載操作

        }
    },false);

可以知道當繪畫時，mousedown事件觸發時，需要把this.isDraw = true,同時記錄滑鼠所在座標，獲取選擇的color和linewidth,並開啟繪畫路徑

    this.penal.addEventListener('mousedown',function(event){
        self.isDraw = true;
        originX = event.clientX - self.penal.offsetLeft;    //原點x座標
        originY = event.clientY - self.penal.offsetTop;     //原點y座標
        self.pen.moveTo(originX, originY);
        self.pen.strokeStyle = self.color.value;
        self.pen.lineWidth = self.lineWidth.value;
        self.pen.beginPath();

    },false);

然後當觸發mouseup事件時，可知需要結束繪畫，若滑鼠離開畫布，即mouseleave時，也需要結束繪畫，這部分很簡單隻需把this.isDraw = false和關閉繪畫路徑

    this.penal.addEventListener('mouseleave', function () {
        if(self.isDraw){
            self.pen.closePath();
            self.isDraw = false;
        }
    },false);
    this.penal.addEventListener('mouseup', function (event) {
        if(self.isDraw){
            self.pen.closePath();
            self.isDraw = false;
        }
    },false);

接下來就是最難的部分的，當mouseover時，需要即時繪製 
先實現鉛筆功能

    this.penal.addEventListener('mousemove',function(event){
        //只有可繪畫時才可畫
        if(self.isDraw){
            var x = event.clientX - self.penal.offsetLeft;  //移動過程中的x座標
            var y = event.clientY - self.penal.offsetTop;   //移動過程中的y座標

            if(self.type == 'pen'){
                self.pen.lineTo(x,y);
                self.pen.stroke();
            }
        }
    },false);

接下來實現橡皮擦功能，實現方法是把繪畫線條加粗，並顏色預設選擇畫布底色

    if(self.type == 'robber'){
         self.pen.strokeStyle = '#ccc';
         self.pen.clearRect(x-10,y-10,20,20);
    }

接下來實現繪製直線，矩形和圓形的方法其實大同小異,然後為了能讓我們畫矩形和圓形能在所有方向都能畫，我們增加了newOriginX和newOriginY兩個變數

    var newOriginX  = originX,newOriginY = originY;

    if(self.type == 'line'){
        self.pen.moveTo(originX,originY);
        self.pen.lineTo(x,y);
        self.pen.stroke();

    }else if(self.type == 'rect'){
        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        self.pen.rect(newOriginX,newOriginY,Math.abs(x-originX),Math.abs(y-originY));
        self.pen.stroke();
    }else if(self.type == 'arc'){
        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        var r = Math.sqrt(Math.abs(x-originX) * Math.abs(x-originX) + Math.abs(y-originY) * Math.abs(y-originY))
        self.pen.arc(Math.abs(x-originX)+newOriginX, Math.abs(y-originY)+newOriginY , r, 0, 2*Math.PI);
        self.pen.fillStyle = self.color.value;
        self.pen.fill();
    }

question:此時我們發現畫的直線，矩形和圓形都會在畫的時候留下移動的痕跡，這不是我們希望的結果，所以解決方法是： 
在mousedown時，把當前畫布內容儲存為圖片，並用初始化時一直沒有使用過的this.img來儲存，然後每次畫直線等的時候先把畫布全部清空，然後在把this.img畫到畫布上 
把原來的mousedown事件新增一句程式碼

    this.penal.addEventListener('mousedown',function(event){
        self.isDraw = true;

        //增加一句程式碼
        self.img.src = self.penal.toDataURL('image/png');

        originX = event.clientX - self.penal.offsetLeft;    //原點x座標
        originY = event.clientY - self.penal.offsetTop;     //原點y座標
        self.pen.moveTo(originX, originY);
        self.pen.strokeStyle = self.color.value;
        self.pen.lineWidth = self.lineWidth.value;
        self.pen.beginPath();

    },false);

把mouseover事件的程式碼稍作更改

    if(self.type == 'line'){

        self.pen.clearRect(0,0,800,800);//增加程式碼
        self.pen.drawImage(self.img, 0, 0);//增加程式碼
        self.pen.beginPath();//增加程式碼

        self.pen.moveTo(originX,originY);
        self.pen.lineTo(x,y);
        self.pen.stroke();

        self.pen.closePath();//增加程式碼
    }else if(self.type == 'rect'){
        self.pen.clearRect(0,0,800,800);//增加程式碼
        self.pen.drawImage(self.img, 0, 0);//增加程式碼
        self.pen.beginPath();//增加程式碼

        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        self.pen.rect(newOriginX,newOriginY,Math.abs(x-originX),Math.abs(y-originY));
        self.pen.stroke();

        self.pen.closePath();//增加程式碼
    }else if(self.type == 'arc'){
        self.pen.clearRect(0,0,800,800);//增加程式碼
        self.pen.drawImage(self.img, 0, 0);//增加程式碼
        self.pen.beginPath();//增加程式碼

        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        var r = Math.sqrt(Math.abs(x-originX) * Math.abs(x-originX) + Math.abs(y-originY) * Math.abs(y-originY))
        self.pen.arc(Math.abs(x-originX)+newOriginX, Math.abs(y-originY)+newOriginY , r, 0, 2*Math.PI);
        self.pen.fillStyle = self.color.value;
        self.pen.fill();
        self.pen.closePath();//增加程式碼
    }

Step3:載入js檔案

    <script src="draw.js"></script>
    <script>
        window.onload = function (){
            var draw = new Draw();
            draw.init();
        };
    </script>

轉自: https://blog.csdn.net/ali1995/article/details/52734253