canvas 是用 js繪制圖形的html元素。起初是 Apple 引入webkit 供mac os 使用于 Dashboard的，后來各大瀏覽器都實現了。
基礎
- 使用canvas需要要獲得要繪制圖形的上下文
- 默認大小 300 x 150
接下來我們用canvas畫個矩形
- 首先定義canvas標簽
<canvas id="canvas" width></canvas>
- 然而什么也沒發生，加個邊框，看到一個寬300 高150的方框了吧
canvas{
border: 1px solid black;
}
- 上面當然不是我們要畫的矩形，下面才是
let canvas = document.getElementById("canvas") // 獲取頁面canvas對象
let ctx = canvas.getContext("2d") // 獲取繪制圖形的上下文，參數可以是2d、3d...
ctx.fillStyle = "rgb(0, 0, 0)" // 下面繪制圖形的填充色
ctx.fillRect(10, 10 , 100, 100) // 從坐標（10，10）的地方畫個寬100高100矩形
- 這就是你畫的矩形，還挺像
image.png
