當前位置:妙知谷 >

遊戲數碼 >IT技術 >

如何運用HTML5畫圖

如何運用HTML5畫圖

工具/材料

Sublime Text

操作方法

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

如何運用HTML5畫圖

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

如何運用HTML5畫圖 第2張

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

如何運用HTML5畫圖 第3張

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

如何運用HTML5畫圖 第4張

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

如何運用HTML5畫圖 第5張

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

如何運用HTML5畫圖 第6張

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

如何運用HTML5畫圖 第7張
標籤: HTML5 畫圖
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-tw/sm/itjishu/e3mjd.html