关于canvas全屏的问题 2016-12-11 17:42 label 前端

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

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

• canvas等比缩放
• 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会将百分值当成数值显示。