Canvas with React

What is Canvas ?

<canvas>

<canvas>

• HTML 元素
  • IE9 以下不支援
• 繪製圖形
• 製作動畫
• 影像繪圖
• 合成、變形資源

Canvas Example

• getContext
  • get Render Context
• Static Size

Draw Graph

• Gird Concept
• Method
  • 矩形
    • fillRect
    • strokeRect
    • clearRect
  • 路徑繪製
    • beginPath
    • closePath
    • stroke
    • fill
    • moveTo
    • lineTo
  • Path2D objects

• arc
• quadraticCurveTo
• bezierCurveTo

矩形繪製

• fillRect(x, y, width, height)
  • ​畫出一個填滿的矩形
• strokeRect(x, y, width, height)
  • ​畫出一個矩形的邊框
• clearRect(x, y, width, height
  • ​​清除指定矩形區域內的內容，使其變為全透明。

路徑繪製

• beginPath
  • 產生一個新路徑，產生後再使用繪圖指令來設定路徑。
• closePath
  • 閉合路徑好讓新的繪圖指令來設定路徑。
• stroke
  • 畫出圖形的邊框。
• fill
  • 填滿路徑內容區域來產生圖形。
• moveTo
  • 移動畫筆到指定的(x, y)座標點
• lineTo
  • 從目前繪圖點畫一條直線到指定的(x, y)座標點。

What I Done 

Canvas With React

And How to combine?

What we need to be done?

React Flow

React Flow

• Start to Draw
  • Draw Layout
    • Draw Board
    • Draw Icon 
  • Draw Dots
• Refresh When Dot Move
  • onDraw
    • canvas method
  • Dot Mouse method
    • mouse down, mouse up, mouse move, mouse out
• Browser Size Change - window resize listener

Final Flow

To Be Continuted...

三角函數登場

• (A ->) B -> C -> D
  • 已知：O1, O2
• Canvas Function
  • arc
• 已知兩點向量
  • 求兩點間的圓弧角度

const startAngle = Math.atan2(prevCenter.y - center.y, prevCenter.x - center.x);
const endAngle = Math.atan2(dy, dx);
this.ctx.arc(center.x, center.y, RADIUS, startAngle, endAngle, false);

Title Text