IT技術(shu)互動交(jiao)流平(ping)台

广西福彩网官网

作者︰whl  發(fa)布日(ri)期︰2020-02-26 01:33:00

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

  最近(jin)因為(wei)工作需要(yao),所以就(jiu)學了一下Html中(zhong)的Canvas標簽。

  Canvas是HTML5新增的組件(jian),它就(jiu)像(xiang)一塊幕(mu)布,可以用JavaScript在上(shang)面(mian)繪制各(ge)種圖表、動畫等。

  沒有Canvas的年代,繪圖只能借(jie)助Flash插(cha)件(jian)實現(xian),頁面(mian)不(bu)得不(bu)用JavaScript和Flash進行交(jiao)互。有了Canvas,我們就(jiu)再也不(bu)需要(yao)Flash了,直接使用JavaScript完成(cheng)繪制。

  當我看了一下教程(cheng)後,自己寫了一個hello world的時候,麻煩事就(jiu)出現(xian)了。看下面(mian)代碼︰

hello world代碼

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

  然而瀏覽(lan)器畫出來的圖像(xiang)卻ci)牽/p>

畫出來的圖像(xiang)

  一看這圖~怎麼(me)ci)欽庋男倍不(bu)應該啊~本應該是一個對角線才(cai)對啊~~

  後來差(cha)了一下資料才(cai)知道,canvas標簽設置width和height的時候,有以下幾(ji)種方(fang)式和產(chan)生的後果(guo)︰

產(chan)生的後果(guo)

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

  現(xian)在我重(zhong)寫了一份(fen)正確設置canvas寬高(gao)大小的代碼例子︰

canvas寬高(gao)代碼例子

  結果(guo)︰

結果(guo)

  總結

  看到這里相信(xin)大家都發(fa)現(xian)Canvas的好me)α稅ba),想起(qi)以前(qian)用Flash插(cha)件(jian)導致的一堆麻煩事實在是一把辛酸淚,可以說Canvas的出現(xian)一定(ding)程(cheng)度上(shang)解放了大家的雙手,不(bu)再再花費(fei)大量的時間來操作了。如果(guo)大家對上(shang)面(mian)的講解還有疑問的mu)翱梢粵粞裕 ”嗷岷痛蠹乙黃qi)討論解決的。

广西福彩网官网

    • 广西福彩网官网

    About IT165 - 廣告服務 - 隱(yin)私聲明(ming) - 版權申明(ming) - 免責條(tiao)款 - 網站地圖 - 亿博平台官网網友(you)投稿 - 聯系方(fang)式
    本站內(na)容來自于互聯網,僅供用于網絡技術(shu)學習,學習中(zhong)請(qing)遵循相關法(fa)律法(fa)規
    广西福彩网官网 | 下一页