有关Canvas的一点小事—canvas和resize

　　 之前就说了canvas设置大小的时候用的就是设置实打实的像素值，像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小。不过项目之前有用到过，既然去了解了，就记下来防止忘记。

         不能自己适应，就只能每次外部容器发生改变的时候给它重新设置大小了。

1、  $(selector).resize()—布局调整大小的时候触发

　　查了查jquery好像有resize函数，顿时很惊喜，然而发现并没有什么用，它只支持$(window).resize(function(){})；在某些情况这个就够用了，但是之前我明显用不了。

　　刚好查到了一个自定义的resize()函数，但是由于过去有点久，又没有留下记录，不知道是谁的代码了，是基于jq的代码。如下:

//监听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);

resize.js