如何運用HTML5畫圖

工具/材料

Sublime Text

操作方法

首先要準備一個畫布，如下圖所示，在HTML5中我們用canvas來表示畫布

然後我們在script指令碼中獲取畫布物件，如下圖所示，運用JS的getElementById方法即可

接下來我們通過畫布物件的getContext方法來獲取上下文2d物件，如下圖所示，我們要操作的內容都在裡面

然後我們給2d上下文填充背景色，如下圖所示，運用上下文的fillStyle屬性即可

接下來，運用上下文的fillRect方法來畫一個矩形，注意裡面的四個值就是四個座標，如下圖所示

最後我們執行介面程式，你會看到如下圖所示的紅色矩形樣例，你可要和上面的座標對應一下

當然2d上下文中還可以畫其他的圖形，如下圖所示的圓形，大家根據自己的需要應用即可