canvas 自適應寬度高度
阿新 • • 發佈：2019-02-19
背景：
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”;
完。