Canvas 2 簡易圖形繪製

繪製網格（圖形座標系）

• 網格中的一個單元，相當於 canvas元素中的一個像素，左上角爲（0,0）所有的元素位置都是相對於原點的定位，

原生圖形繪製

• 在 canvas 中，HTML中只支持一種原生圖形繪製：矩形。其它圖形都需要你至少生成一條路徑。

• canvas 中提供的3種繪製矩形的方法：

  • fillRect(x, y, width, height)
  • strokeRect(x, y, width, height)
  • clearRect(x, y, width, height)

• stroke指的的線段填充。

• fill指的是內容填充

• clear值得是清楚一個矩形區域

路徑繪製方法

1. 創建繪製起始點
2. 使用畫圖命令畫出路徑
3. 之後把路徑封閉
4. 最後通過描邊和填充路徑區域來渲染圖形

• beginPath()

  • 創建一條路徑，生成後，圖形繪製命令被指向到路徑上生成路徑
  • 调用 beginPath（）之后，第一条路径构造的命令通常是moveTo（x,y）。將筆觸放置到某一個位置。

• closePath()

  • 閉合路徑之後圖形繪製命令又重新指向上下文，不是必须的，當調用 fill（）函數的時候，所有沒有閉合的形狀都會自動閉合，所以你不需要調用closePath（），但是調用stroke（）時不會自動閉合
  • 這裏需要注意，關閉一個圖形的繪製使用的是closePath（）不是 close（）

• stroke()

  • 繪製圖形輪廓

• fill()

  • 通過填充路徑的內容區域生成實心的圖形

• 繪製一個實心三角形

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.strokeRect(0, 0, 100, 100);
    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

• 繪製曲線
  • context.arc（x,y,radius,startAngle,endAngle,anticlockwise）
  • 參數依次是：
    • 圓心 x 座標
    • 圓心 y 座標
    • radius半徑
    • 圓弧的終點，單位是弧度
    • boolean，用於判斷繪製是順時針還是逆時針
      

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.strokeRect(0, 0, 100, 100);
    ctx.strokeRect(0, 0, 75, 50);
    
    ctx.beginPath();
    ctx.arc(75,50,5,0,Math.PI*2,true); 
    ctx.moveTo(105,75);
    ctx.arc(100,75,5,0,Math.PI*2,true);
    ctx.moveTo(105,25);
    ctx.arc(100,25,5,0,Math.PI*2,true); 
    ctx.stroke();
  
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}