Background:
Csnvas cannot set width and height in style, which stretches the entire csnvas. You need to set the attributes width and height to control width and height, so that the value is written dead and cannot automatically adapt to the screen size.
Solution:
- Set the top, bottom, left and right outer margins and inner margins of the outermost box body to 0;
- The height and width of a div of canvas set is 100%;
- Set up custom Jquery events.
Custom Jquery event code:
//Monitor the change of div size
(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);Call:
$(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];
});
});The HTML code is as follows:
<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>Train of thought:
Monitor the div size with id box in real time. When it changes, get the box size and assign it to canvas.
Special attention:
- The style of body is to make the height of div have a reference term and not be infinite;
-
The value obtained by window.getComputedStyle(box).height has the suffix "px";
Finish.