html5 canvas 設置了寬和高屬性依然被拉伸


一、問題:

我的項目使用vue.js + element.js,在引入 canvas 時候,通過標簽的 width 和  height  屬性設置了寬和高,但是顯示長度發生變化,渲染也變形。如圖所示:

 

這是引入的位置, width 和 height 均被綁定在一個配置對象上,

 

綁定對象如圖所示:

可見數據已經被設置了,這也是網上大多數博客提供的方法

 

然而瀏覽器重新加載后,被自動拉伸(高度變為父元素 div 的高度)

左上角顯示canvas的寬和高:800*854,854是父元素 div 的高度

 

二、解決對策

這是我瞎試出的結果,如果對你無用的話,請輕噴:)

使用一個新的父元素 div 包裹 canvas (增加一個容器)

 

如圖:

 

然后重新加載應用,上傳圖片,效果如下:

可見 canvas 寬和高設置正常了。但是剛才加上去的容器的寬和高被設置成了800*854.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM