文章主要給大家介紹了關(guān)于H5 canvas中width、height和style的寬高區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近在學(xué)習(xí)canvas屬性中遇到一個(gè)小問(wèn)題,就是canvas的width和height，通過(guò)查找相關(guān)的資料終于解決，所以下面將解決的過(guò)程分享出來(lái)給大家，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

Canvas 的width height屬性

1、當(dāng)使用width height屬性時(shí)，顯示正常不會(huì)被拉伸；如下

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

運(yùn)行效果如下，為對(duì)角線

2、使用style時(shí)圖像會(huì)被拉伸（變形），

1. <style>
2. #mycanvas {
3.    width: 150px;
4.    height: 150px;
5. }
6. </style>

運(yùn)行效果

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

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

畫板和畫紙的默認(rèn)寬高是300*150，當(dāng)畫紙與畫板寬高相等時(shí)，圖像不會(huì)被拉伸，當(dāng)畫紙與畫板寬高不一樣時(shí)，圖像就會(huì)被拉伸（變形）。

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

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

2， style樣式 里設(shè)定的是僅畫板的寬高，畫紙的寬高還是為默認(rèn)值300*150，（以上圖為例）因此所作業(yè)的300*300的對(duì)角線圖像僅有一部分畫在畫紙上，如下：

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

關(guān)于HTML5中Canvas的寬、高設(shè)置問(wèn)題

Canvas元素默認(rèn)寬 300px, 高 150px, 設(shè)置其寬高可以使用如下方法(不會(huì)被拉伸)：

方法一：
       <canvas width="500" height="500"></canvas>

方法二：使用HTML5 Canvas API操作 OK

       var canvas = document.getElementById('欲操作canvas的id');

       canvas.width = 500;

       canvas.width = 500;

若通過(guò)如下方法設(shè)置寬高，那么Canvas元素將由原來(lái)大小被拉伸到所設(shè)置的寬高：

方法一：使用CSS 會(huì)被拉伸

     #欲操作canvas的id｛

          width:1000px;

          height:1000px;

     ｝

方法二：使用HTML5 Canvas API操作 會(huì)被拉伸

      var canvas = document.getElementById('欲操作canvas的id');

      canvas.style.width = "1000px";

      canvas.style.height = "1000px";

方法三 ：用jquery的$("#id").width(500);會(huì)被拉伸

其它：

canvas的width和height也不能用百分比表示。canvas會(huì)將百分值當(dāng)成數(shù)值顯示

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值。