工具/材料

Sublime Text

操作方法

• 01

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

  
• 02

  然后我們?cè)趕cript腳本中獲取畫(huà)布對(duì)象，如下圖所示，運(yùn)用JS的getElementById方法即可

  
• 03

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

  
• 04

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

  
• 05

  接下來(lái)，運(yùn)用上下文的fillRect方法來(lái)畫(huà)一個(gè)矩形，注意里面的四個(gè)值就是四個(gè)坐標(biāo)，如下圖所示

  
• 06

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

  
• 07

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