IT技術互動交流平臺

如何對Canvas里的width與height進行設置

作者:whl  發布日期:2018-11-13 08:57:00

  Canvas是HTML5里最新增加的一個元素,電腦用戶繪制圖形的時候用其進行操作會發現過程變得十分簡單快捷。下面主要給大家對Canvas中設置width和height將會出現的問題進行詳細解答,示例代碼也有給大家一一列出,有需要的朋友趕緊一起來學習吧!

  最近因為工作需要,所以就學了一下Html中的Canvas標簽。

  Canvas是HTML5新增的組件,它就像一塊幕布,可以用JavaScript在上面繪制各種圖表、動畫等。

  沒有Canvas的年代,繪圖只能借助Flash插件實現,頁面不得不用JavaScript和Flash進行交互。有了Canvas,我們就再也不需要Flash了,直接使用JavaScript完成繪制。

  當我看了一下教程后,自己寫了一個hello world的時候,麻煩事就出現了。看下面代碼:

hello world代碼

  上面代碼的意思,是要在一個width和height各為200px的canvas上畫一條直線,該直線的起點為(0,0),終點為(200,200);

  然而瀏覽器畫出來的圖像卻是:

畫出來的圖像

  一看這圖~怎么是這樣的斜度?不應該啊~本應該是一個對角線才對啊~~

  后來差了一下資料才知道,canvas標簽設置width和height的時候,有以下幾種方式和產生的后果:

產生的后果

  所以,通過上面的資料便可知道其原因就是我上面例子中代碼會讓canvas的寬高被拉伸了,從而使得圖像跟預想的不一致的。

  現在我重寫了一份正確設置canvas寬高大小的代碼例子:

canvas寬高代碼例子

  結果:

結果

  總結

  看到這里相信大家都發現Canvas的好處了吧,想起以前用Flash插件導致的一堆麻煩事實在是一把辛酸淚,可以說Canvas的出現一定程度上解放了大家的雙手,不再再花費大量的時間來操作了。如果大家對上面的講解還有疑問的話可以留言,小編會和大家一起討論解決的。

延伸閱讀:

  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
香港最快开奖现场直播结果