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会将百分值当成数值显示