如何運用HTML5畫圖
- IT技術
- 關注:2.47W次
工具/材料
Sublime Text
操作方法
首先要準備一個畫布,如下圖所示,在HTML5中我們用canvas來表示畫布
然後我們在script指令碼中獲取畫布物件,如下圖所示,運用JS的getElementById方法即可
接下來我們通過畫布物件的getContext方法來獲取上下文2d物件,如下圖所示,我們要操作的內容都在裡面
然後我們給2d上下文填充背景色,如下圖所示,運用上下文的fillStyle屬性即可
接下來,運用上下文的fillRect方法來畫一個矩形,注意裡面的四個值就是四個座標,如下圖所示
最後我們執行介面程式,你會看到如下圖所示的紅色矩形樣例,你可要和上面的座標對應一下
當然2d上下文中還可以畫其他的圖形,如下圖所示的圓形,大家根據自己的需要應用即可
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-tw/sm/itjishu/e3mjd.html