skip to content

JS 30 challenge - 08 心得

Fun with HTML5 Canvas

Demo & Github

DEMO

getContext('2d')

HTML5 的 Canvas 標籤很簡單，他只有兩個屬性跟兩個方法：

  • width
  • height
  • getContext()
  • toDataURL()

其中getContext()是為了讓使用者能在 Canvas 上作畫。

參閱：HTMLCanvasElement.getContext()

Canvas API

練習當中有用到的屬性，詳細程式碼可參閱 Github 連結。

ctx.strokeStyle = "#BADA55";
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.lineWidth = 100;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];

參閱：Canvas API