H5canvas中width、height和style的寬高區(qū)別分析-創(chuàng)新互聯(lián)

小編給大家分享一下H5 canvas中width、height和style的寬高區(qū)別分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)一直在為企業(yè)提供服務，多年的磨煉，使我們在創(chuàng)意設計，全網(wǎng)整合營銷推廣到技術研發(fā)擁有了開發(fā)經(jīng)驗。我們擅長傾聽企業(yè)需求，挖掘用戶對產(chǎn)品需求服務價值，為企業(yè)制作有用的創(chuàng)意設計體驗。核心團隊擁有超過10年以上行業(yè)經(jīng)驗，涵蓋創(chuàng)意，策化，開發(fā)等專業(yè)領域，公司涉及領域有基礎互聯(lián)網(wǎng)服務四川樂山服務器托管、成都app軟件開發(fā)、手機移動建站、網(wǎng)頁設計、網(wǎng)絡整合營銷。

Canvas 的width height屬性

1、當使用width height屬性時，顯示正常不會被拉伸；如下

<canvas id="mycanvas" width="300" height="300">瀏覽器不支持Canvas,請升級或改用其它瀏覽器！</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
</script>

運行效果如下，為對角線

2、使用style時圖像會被拉伸（變形），

<style>
         
        #mycanvas {
            width: 150px;
            height: 150px;
        }
    </style>

運行效果

如何理解？？？可以這么理解————

Canvas 是一個畫板和一張畫紙，畫板相當于一個容器，畫圖/作業(yè)是在畫紙上進行的，

畫板和畫紙的默認寬高是300*150，當畫紙與畫板寬高相等時，圖像不會被拉伸，當畫紙與畫板寬高不一樣時，圖像就會被拉伸（變形）。

1， width 和 height 屬性是設定畫板和畫紙的寬高，

如： width=”300” height=”300” 即畫板的寬高是300*300，畫紙的寬高也是300*300，作業(yè)的300*300 的對角線圖像就不會被拉伸

 

2， style樣式 里設定的是僅畫板的寬高，畫紙的寬高還是為默認值300*150，

（以上圖為例）因此所作業(yè)的300*300的對角線圖像僅有一部分畫在畫紙上，如下：

Btw 畫紙不會讓畫板就這么空出一片，于是畫紙連同圖像就要一起拉伸到跟畫板大小一樣。在此例子當中，畫紙寬與畫板寬都為30，而高為畫板的一半，因此只需將高拉伸一倍即可，so 圖像也一起被拉伸變瘦，X方向不變，Y方向增至一倍， 所以就得到了變形之后的圖片

引用 //www.yisu.com/html5/643939.html 的一段總結

關于HTML5中Canvas的寬、高設置問題
Canvas元素默認寬 300px, 高 150px, 設置其寬高可以使用如下方法(不會被拉伸)：
方法一：
       <canvas width="500" height="500"></canvas>
方法二：使用HTML5 Canvas API操作 OK
       var canvas = document.getElementById('欲操作canvas的id');
       canvas.width = 500;
       canvas.width = 500;
若通過如下方法設置寬高，那么Canvas元素將由原來大小被拉伸到所設置的寬高：
方法一：使用CSS 會被拉伸
     #欲操作canvas的id｛
          width:1000px;
          height:1000px;
     ｝
方法二：使用HTML5 Canvas API操作 會被拉伸
      var canvas = document.getElementById('欲操作canvas的id');
      canvas.style.width = "1000px";
      canvas.style.height = "1000px";
方法三 ：用jquery的$("#id").width(500);會被拉伸
其它：canvas的width和height也不能用百分比表示。canvas會將百分值當成數(shù)值顯示

看完了這篇文章，相信你對“H5 canvas中width、height和style的寬高區(qū)別分析”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標題：H5canvas中width、height和style的寬高區(qū)別分析-創(chuàng)新互聯(lián)
文章出自：http://bm7419.com/article10/ggedo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、App設計、電子商務、App開發(fā)、移動網(wǎng)站建設、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)