前端學習筆記----canvas實現畫板及定製畫筆(畫筆錯位，撤回，粗細，顏色)

本期的小需求:
在頁面中實現一個能進行繪畫的畫板
能實現畫筆顏色、粗細、撤回等功能

開發環境

Vue + elementUI

採坑記錄

• 畫筆與鼠標錯位 （噁心好久）（樣式設置長寬canvas致使）
• 畫筆切換顏色 粗細
• 圖片跨域等等.....

動手

1.生成或選中canvas對象

// html
<canvas id="box"></canvas>

// vue

let canvas = $("#canvas")[0]
//$("#canvas")獲取的是jquery對象 不是真實的dom對象 要麼使用dom操做獲取

複製代碼

2.生成繪畫畫布環境

let canvas = $("#canvas")[0]
//$("#canvas")獲取的是jquery對象 不是真實的dom對象 要麼使用dom操做獲取
let ctx = canvas.getContext("2d")
//getContext() 方法返回一個用於在畫布上繪圖的環境。
//目前只接受 2d 這個參數
複製代碼

ps: canvas 畫板繪製api

//矩形
ctx.fillRect(x, y, width, height)
//繪製一個填充的矩形

ctx.strokeRect(x, y, width, height)
//繪製一個矩形的邊框

ctx.clearRect(x, y, widh, height)
//清除指定的矩形區域，而後這塊區域會變的徹底透明

//線條路徑

ctx.beginPath()
//新建一條路徑，路徑一旦建立成功，圖形繪製命令被指向到路徑上生成路徑

ctx.moveTo(x, y)
//把畫筆移動到指定的座標(x, y)。至關於設置路徑的起始點座標。

ctx.closePath()
//閉合路徑以後，圖形繪製命令又從新指向到上下文中

ctx.stroke()
//經過線條來繪製圖形輪廓

ctx.fill()
//經過填充路徑的內容區域生成實心的圖形

// 繪製圓弧
ctx.arc(x, y, r, startAngle, endAngle, anticlockwise):
//以(x, y)爲圓心，以r爲半徑，從tartAngle弧度開始到endAngle弧度結束。anticlosewise是布爾值，true表示逆時針，false表示順時針。(默認是順時針)
//這裏的度數都是弧度。
//0弧度是指的x軸正方形
//radians=(Math.PI/180)*degrees   //角度轉換成弧度
ctx.arcTo(x1, y1, x2, y2, radius):
//根據給定的控制點和半徑畫一段圓弧，最後再以直線鏈接兩個控制點
複製代碼

3.canvas 畫板實現

實現思路： 監聽鼠標事件，用drawCircle()方法畫出來

1. 監聽畫板區域鼠標事件,未開始時設置painting 爲 false
2. 當鼠標按下時(mousedown),開啓畫筆函數，painting爲true,鼠標鬆開以前記錄路徑點,並繪製記錄點
3. 使用lineTo()函數把每一個點鏈接
4. 鼠標鬆開的時候（mouseup）,關閉畫筆函數

data(){
    return{
        isClear：false
    }
}
canvasLoad(){
    let canvas = $("box")[0];
    let context = canvas.getContext("2d");
    //
    let img = new Image();
    img.src = "";
    //由於我這個畫板是有背景圖的因此須要加載img 如若不須要忽略此步
    img.onload = () =>{
        //使用onload函數 在img src加載完畢後調用
        let width = img.width
        let height = img.height
        //onload 後才能獲取到圖片尺寸
        canvas.width = width
        canvas.height = height
        // ****切忌使用css去指定canvas寬高****
        //css設置canvas元素寬高會致使像素點被壓縮
        //致使canvas 元素點定位誤差 以及 畫筆等錯位
        //如需縮放 設置先設置img寬高 壓縮 在把寬高賦予給canvas
        context.drawImage(img, 0, 0, width,height);
        //繪製背景圖
        this.drawLine()
        // 定義畫筆
        $("#blackBtn").click(() => {
            context.strokeStyle = "#000000";
        });
        $("#whiteBtn").click(() => {
            context.strokeStyle = "#FFFFFF";
        });
        $("#clearBtn").click(() => {
        // 清屏
            context.clearRect(0,0,innerWidth,innerHeight)
        });
        $("#eraserBtn").click(() => {
        // 橡皮擦
            this.isClear=true;
        });
        $("#widthBtn").click(() => {
        // 設置畫筆寬度
        // 不是點擊事件 能夠改爲監聽等等
            context.lineWidth = width;
        });
        
        // 調整畫筆顏色的點擊事件可供參考
        // context需保持上下文一致
    }
}
drawLine() {
      const that = this
      let canvas = $("#box")[0];
      let context = canvas.getContext("2d");
      context.canvas.addEventListener("mousedown", startAction)
      // 監聽畫板鼠標按下事件 開始繪畫
      context.canvas.addEventListener("mouseup", endAction)
      // 監聽畫板鼠標擡起事件 結束繪畫
      function startAction(event) {
        //監聽鼠標移動事件
        //若是沒有使用橡皮擦就畫線
        if (!that.isClear) {
          //開始新的路徑
          context.beginPath();
          context.lineCap = "round";
          // 結束 及 開始 圓形線帽
          context.moveTo(event.pageX,event.pageY);
          context.stroke();
        }
        context.canvas.addEventListener("mousemove", moveAction);
      }
              //封裝鼠標擡起函數
      function endAction() {
            //再也不使用橡皮擦
            that.isClear=false;
            //移除鼠標移動事件
            context.canvas.removeEventListener("mousemove",moveAction);
      }
      function moveAction(event) {
            //判斷是否啓動橡皮擦功能
            if(that.isClear){
               context.clearRect(event.pageX-8,event.pageY-8,16,16);
            return;
            }
            context.lineTo(event.pageX,event.pageY);
            context.stroke();
       }
}

複製代碼

4.實現撤回功能

data(){
    return{
        ...
        canvasHistory
    }
}
.... 
canvasLoad(){
    ...
    $("#recallBtn").click(() => {
        // 撤回畫板
        img.src = that.canvasHistory[that.canvasHistory.length-1]
        // 撤回回上一個版本
        //從新繪製過程
        this.canvasLoad()
        // 撤回完成後刪除最後一項
        that.canvasHistory.pop()
    });
        
    ...
    
}
drawLine(){
     function startAction() {
     ...
        that.canvasHistory.push(canvas.toDataURL())
        //每次開始繪畫前 把上一個版本的canvas轉化爲url放進數組中
     }
}
複製代碼