工具/材料

Sublime Text

操作方法

• 01

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

  
• 02

  然后我們在script腳本中獲取畫布對象，如下圖所示，運用JS的getElementById方法即可

  
• 03

  接下來我們通過畫布對象的getContext方法來獲取上下文2d對象，如下圖所示，我們要操作的內(nèi)容都在里面

  
• 04

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

  
• 05

  接下來，運用上下文的fillRect方法來畫一個矩形，注意里面的四個值就是四個坐標(biāo)，如下圖所示

  
• 06

  最后我們運行界面程序，你會看到如下圖所示的紅色矩形樣例，你可要和上面的坐標(biāo)對應(yīng)一下

  
• 07

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