真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

canvas元素變形失真的原因

這篇文章給大家分享的是有關(guān)canvas元素變形失真的原因的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

為清徐等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及清徐網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站制作、清徐網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!

遇到的問題:canvas元素變形失真的原因

一個DOM元素存在三種尺寸:style尺寸,html尺寸,css尺寸。

使用canvas元素時,canvas元素默認(rèn)寬高是300px * 150px。這里的默認(rèn)尺寸是html尺寸。

為了更好地幫助理解,以作畫為例。畫板是css尺寸或者style尺寸,畫布是html尺寸。

如果我們沒有顯示指定canvas元素的html尺寸,而在css文件中指定了它的css尺寸。結(jié)果是十分令人困惑。

例如我們在一個默認(rèn)300px * 150px的畫布上畫了一個圓半徑為50px的圓。



    
    canvas尺寸
    


    

最后顯示的結(jié)果如下:

canvas元素變形失真的原因

可以看出畫布的尺寸確實是200 * 200。但是圓已經(jīng)變成了橢圓,圖形發(fā)生了形變。這是為什么呢?

如果移除css設(shè)定的尺寸又會怎么樣呢?

canvas元素變形失真的原因

可以看出此時圖形是正常的。畫布的尺寸確實是默認(rèn)的300 * 150。

從對比以及想象中我們可以得出結(jié)論:

起初我們是在300 150的畫布上繪制一個圓。繪制完成之后,我們又希望將畫布的尺寸變成200 200,同時畫布還是那塊畫布,不作更換。

可行的方法是將畫布經(jīng)行拉伸。假設(shè)畫布存在彈性,那么一塊畫布從300 150拉伸成200 200。畫布上的圓的長半軸變成原來的1.33倍,短半軸變成0.68倍。此時圓自然就是橢圓了。

結(jié)論:

在使用canvas畫圖的時候,為了避免不必要的麻煩,一定記得為canvas元素設(shè)定html尺寸的寬高。

感謝各位的閱讀!關(guān)于“canvas元素變形失真的原因”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!


本文名稱:canvas元素變形失真的原因
新聞來源:http://weahome.cn/article/podscj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部