关于canvas全屏的问题

刚上手canvas，被它的全屏问题，搞到蛋疼，最后解决了，非常激动。

关于canvas全屏，实际上要知道两样东西。

1.canvas等比缩放

2.canvas拉伸

1 等比缩放

方法一：

<canvas width="500" height="500"></canvas>

方法二：使用HTML5 Canvas API操作

var canvas = document.getElementById('canvas的id');
canvas.width = 500;
canvas.height= 500;

以上方法设置宽高会以300*150的比例缩小扩大。

2 拉伸

若通过如下方法设置宽高，Canvas元素将由原来大小被拉伸到所设置的宽高。

方法一：使用CSS 会被拉伸

#canvas的id｛
width:1000px;
height:1000px;
｝

方法二：使用HTML5 样式操作 会被拉伸

var canvas = document.getElementById('canvas的id');
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";

方法三 ：用jquery的

$("#id").width(500)

会被拉伸

其它：canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示。

我用的就是拉伸里面的方法二解决的问题。

非常感谢 http://www.myexception.cn/HTML-CSS/631965.html 的资料