canvas 自适应宽度高度

最新推荐文章于 2024-01-28 20:12:44 发布

喝酒的猫

最新推荐文章于 2024-01-28 20:12:44 发布

阅读量1.3w

点赞数 4

分类专栏：前端文章标签： canvas canvas大小 canvas自适应

本文链接：https://blog.csdn.net/qq_37506772/article/details/82894485

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景：

csnvas 不可以在style中设置宽度高度，这样会将整个 csnvas 拉伸，需设置属性 width 和 height 来控制宽度高度，这样一来值就写死了，不能自动适应屏幕大小。

解决方案：

设置最外围的盒子 body 上下左右外边距、内边距为 0；
canvas 套一个 div 高度宽度为 100%；
设置自定义 Jquery 事件。

自定义的Jquery事件代码：

//监听 div 大小变化
(function($, h, c) {
    var a = $([]),
        e = $.resize = $.extend($.resize, {}),
        i,
        k = "setTimeout",
        j = "resize",
        d = j + "-special-event",
        b = "delay",
        f = "throttleWindow";
    e[b] = 250;
    e[f] = true;
    $.event.special[j] = {
        setup: function() {
            if (!e[f] && this[k]) {
                return false;
            }
            var l = $(this);
            a = a.add(l);
            $.data(this, d, {
                w: l.width(),
                h: l.height()
            });
            if (a.length === 1) {
                g();
            }
        },
        teardown: function() {
            if (!e[f] && this[k]) {
                return false;
            }
            var l = $(this);
            a = a.not(l);
            l.removeData(d);
            if (!a.length) {
                clearTimeout(i);
            }
        },
        add: function(l) {
            if (!e[f] && this[k]) {
                return false;
            }
            var n;
            function m(s, o, p) {
                var q = $(this),
                    r = $.data(this, d);
                r.w = o !== c ? o: q.width();
                r.h = p !== c ? p: q.height();
                n.apply(this, arguments);
            }
            if ($.isFunction(l)) {
                n = l;
                return m;
            } else {
                n = l.handler;
                l.handler = m;
            }
        }
    };
    function g() {
        i = h[k](function() {
            a.each(function() {
                var n = $(this),
                    m = n.width(),
                    l = n.height(),
                    o = $.data(this, d);
                if (m !== o.w || l !== o.h) {
                    n.trigger(j, [o.w = m, o.h = l]);
                }
            });
            g();
        },
        e[b]);
    }
})(jQuery, this);

调用：

$(function () {
    $("#box").resize(function(){
        var contentHeight = window.getComputedStyle(box).height;
        var contentWidth = window.getComputedStyle(box).width;
        console.info("contentWidth = " + contentWidth + ",contentHeight = " + contentHeight);
        var canvas = document.getElementById('canvas');
        canvas.width = contentWidth.split("px")[0];
        canvas.height = contentHeight.split("px")[0];
    });
});

HTML代码如下：

<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding:0;margin: 0;">
    <div id="box" style="width: 100%;height: 100%;border: 2px solid red; padding: 0 0;">
        <canvas id="canvas" style="border: 2px solid red; margin: 0 0;">
        </canvas>
    </div>
</body>

思路：

实时监听 id 为 box 的div大小，当发生变化时候，获取 box 的大小，赋值给 canvas。

特别注意：

body 的 style 是为了让div 的高度有参考项，不至于高度无限；

window.getComputedStyle(box).height 获得的值具有后缀 “px”;

完。

喝酒的猫

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
canvas 自适应宽度高度

背景： csnvas 不可以在style中设置宽度高度，这样会将整个 csnvas 拉伸，需设置属性 width 和 height 来控制宽度高度，这样一来值就写死了，不能自动适应屏幕大小。解决方案：设置最外围的盒子 body 上下左右外边距、内边距为 0； canvas 套一个 div 高度宽度为 100%；设置自定义 Jquery 事件。自定义的Jquery事件代...
复制链接

扫一扫