canvas的width和height属性的特殊之处

来源：互联网发布：js select2默认不选中编辑：程序博客网时间：2024/05/16 06:34

前言

大家好，想必各位猿们都知道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属性，发现其大小没有改变，而里边图片的清晰度发生了变化，怎么样，是不是恍然大悟呢？

0 0