前言
大家好，想必各位猿們都知道canvas的width和height屬性在w3c標準中規定要寫在行內，作爲標籤屬性而不是行內樣式，但是究竟是爲什麼呢?我爲什麼要寫行內呢？寫樣式裏不可以嗎？有什麼特殊含義嗎？不就是寬度和高度嗎？等等諸多疑問卻很少有人去了解，在這裏且聽筆者一一道來。
當時看到這個規定時，筆者亦不以爲然，之後在一段時間使用中，有時候寫行內，有時候寫樣式中，感覺跟div的寬高屬性沒什麼區別，不過最近在寫設置遊戲分辨率功能時，有更深入的瞭解，才恍然大悟，原來是有原因的，width和height屬性作爲標籤屬性寫在行內代表的是畫布的分辨率(resolution)，而寫在樣式裏代表的是畫布的大小（size）。廢話少說，請看代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
body{
width:100%;height:100%;background:black;
}
canvas{
width:800px;height:480px;outline:1px solid pink;position:absolute;
left:0;top:0;right:0;bottom:0;margin:auto;
}
</style>
</head>
<body>
<button>240x120</button>
<button>320x240</button>
<button>480x320</button>
<button>640x420</button>
<button>800x480</button>
<canvas id="canvasId" width="480" height="320">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
var btns = document.getElementsByTagName('button');
var resolution = [
[240, 120],
[320, 240],
[480, 320],
[640, 420],
[800, 480]
];
//canvas分辨率
var resolutionW = canvas.getAttribute('width');
var resolutionH = canvas.getAttribute('height');
//canvas大小
var sizeW = canvas.offsetWidth;
var sizeH = canvas.offsetHeight;
console.log(resolutionW);
console.log(resolutionH);
console.log(sizeW);
console.log(sizeH);
var img = new Image();
img.src = "http://img5.niutuku.com/phone/1301/0920/0920-niutuku.com-483082.jpg"; //這張圖片像素爲800x480
img.onload = function() {
draw(3);
for (var i = 0; i < btns.length; i++) {
(function(i) {
btns[i].onclick = function() {
draw(i);
}
})(i);
}
}
function draw(i) {
canvas.setAttribute('width', resolution[i][0]);
canvas.setAttribute('height', resolution[i][1]);
context.clearRect(0, 0, sizeW, sizeH);
context.drawImage(img, 0, 0, sizeW, sizeH, 0, 0, resolution[i][0], resolution[i][1]);
}
</script>
</body>
</html>大家運行一下，就可以發現，改變了canvas標籤中的width和height屬性，發現其大小沒有改變，而裏邊圖片的清晰度發生了變化，怎麼樣，是不是恍然大悟呢？