iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

Canvas 小錦囊系列 第 9

Day 9 - 用 canvas 復刻 小畫家 曲線

  • 分享至 

  • xImage
  •  

曲線

曲線有以下幾種方法

quadraticCurveTo

quadraticCurveTo 是 Canvas 2D API 新增二次貝塞爾曲線路徑的。它需要一個點。第一個點是控制,第二個點是方法點。看起來點是當前路徑的最新點,當創建二次貝賽爾曲線之前,可以使用使用 moveTo()方法進行改變。

bezierCurveTo

bezierCurveTo 是Canvas 2D API 繪製第三貝賽茲路線的方法。該方法需要三個點。第一、第二點,第三個點是結束點。繪製貝賽爾沿前,可以通過調用 moveTo()進行修改

還記得嗎? bezierCurveTo 就是我們上一篇章拿來繪製橢圓的方法,但在這裡繪製曲線會過於複雜。

實作

這次我們使用 quadraticCurveTo ,單純是因為使用上比較直覺簡單!來看看程式碼吧

case "curve": // 曲線
  clearCanvas();
  restore();
  //curve toward mouse
  ctx.beginPath();
  ctx.moveTo(secondPoint?.x, secondPoint?.y);
  ctx.quadraticCurveTo(
    point?.x,
    point?.y,
    initialPoint?.x,
    initialPoint?.y
  );
  ctx.stroke();
  break;
  /**
   * 滑鼠點下畫布
   */
  const handleMouseDown = (event: any) => {
    setIsDrawing(true);
    const point = getClientOffset(event);
    setInitialPoint({ ...point });
    switch (tool) {
    ...
      case "curve":
        saveCanvas();
        break;
      default:
        break;
    }
  };
  /**
   * 提起畫筆
   */
  const handleMouseUp = (event: any) => {
    if (isDrawing) {
      setIsDrawing(false);
      setInitialPoint(null);
      lastPoint = null;
      switch (tool) {
        case "curve":
          const point = getClientOffset(event);
          setSecondPoint(point);
          break;
        default:
          break;
      }
    }
  };

完成!


上一篇
Day 8 - 用 canvas 復刻 小畫家 繪製圓形/橢圓形
下一篇
Day 10 - 用 canvas 復刻 小畫家 放大鏡
系列文
Canvas 小錦囊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言