H5 canvas的 width、height 與style中寬高的區別

Canvas 的width height屬性

 

 

一、當使用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>

　　

運行效果以下，爲對角線

 

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

 

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

　　

運行效果

  

如何理解？？？能夠這麼理解————

Canvas 是一個畫板和一張畫紙，畫板至關於一個容器，畫圖/做業是在畫紙上進行的，

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

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

如： width=」300」 height=」300」 即畫板的寬高是300*300，畫紙的寬高也是300*300，做業的300*300 的對角線圖像就不會被拉伸

 

2， style樣式 裏設定的是僅畫板的寬高，畫紙的寬高仍是爲默認值300*150，

（以上圖爲例）所以所做業的300*300的對角線圖像僅有一部分畫在畫紙上，以下：

  

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

       

  

引用 http://www.cnblogs.com/JamKong/p/4987163.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會將百分值當成數值顯示