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

MrZss發表於2018-12-13
前端筆記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放進陣列中
     }
}
複製程式碼

相關文章