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

最新推荐文章于 2024-06-09 12:44:11 发布

全赞功成湿

最新推荐文章于 2024-06-09 12:44:11 发布

阅读量3.9k

点赞数 3

分类专栏： js 文章标签： canvas js width height 画布宽高属性

本文链接：https://blog.csdn.net/k358971707/article/details/53143386

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前言

大家好，想必各位猿们都知道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>