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

我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、太白ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的太白網(wǎng)站制作公司

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

一個(gè)DOM元素存在三種尺寸：style尺寸，html尺寸，css尺寸。

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

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

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

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

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

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

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

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

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

起初我們是在300150的畫布上繪制一個(gè)圓。繪制完成之后，我們又希望將畫布的尺寸變成200 200，同時(shí)畫布還是那塊畫布，不作更換。

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

結(jié)論：

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

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

當(dāng)前文章：canvas元素變形失真的原因-創(chuàng)新互聯(lián)
當(dāng)前URL：http://weahome.cn/article/didgeh.html