javascript HTML 画布 - 调整大小时绘图消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11179274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML canvas - drawing disappear on resizing
提问by Yogesh Agarwal
I have created a basic shape in HTML canvas element which works fine.
我在 HTML 画布元素中创建了一个基本形状，效果很好。
The problem occurs when I resize the canvas, all the drawing in the canvas disappears. Is this the normal behavior? or is there a function that can be used to stop this?
当我调整画布大小时出现问题，画布中的所有绘图都消失了。这是正常行为吗？或者是否有可以用来阻止这种情况的功能？
One way to fix this could be to call drawing function again on canvas resize however this may not be very efficient if there is huge content to be drawn.
解决此问题的一种方法可能是在画布调整大小时再次调用绘图函数，但是如果要绘制大量内容，这可能不是很有效。
What's the best way?
最好的方法是什么？
Here is the link to sample code https://gist.github.com/2983915
这是示例代码的链接https://gist.github.com/2983915
回答by Simon Sarris
You need to redraw the scene when you resize.
调整大小时需要重新绘制场景。
setting the width or height of a canvas, even if you are setting it to the same value as before, not only clears the canvas but resets the entire canvas context. Any set properties (fillStyle, lineWidth, the clipping region, etc) will also be reset.
设置画布的宽度或高度，即使您将其设置为与之前相同的值，不仅会清除画布，还会重置整个画布上下文。任何设置的属性（fillStyle、lineWidth、剪切区域等）也将被重置。
If you do not have the ability to redraw the scene from whatever data structures you might have representing the canvas, you can always save the entire canvas itself by drawing it to an in-memory canvas, setting the original width, and drawing the in-memory canvas back to the original canvas.
如果您无法从表示画布的任何数据结构中重新绘制场景，您始终可以通过将整个画布绘制到内存中的画布、设置原始宽度并绘制输入来保存整个画布本身。记忆画布回到原来的画布。
Here's a really quick example of saving the canvas bitmap and putting it back after a resize:
这是保存画布位图并在调整大小后将其放回的非常快速的示例：
回答by remcoder
Everytime you resize the canvas it will reset itself to transparant black, as defined in the spec.
每次调整画布大小时，它都会将自身重置为透明黑色，如规范中所定义。
You will either have to:
您要么必须：
- redraw when you resize the canvas, or,
- don't resize the canvas
- 调整画布大小时重绘，或者，
- 不要调整画布大小
回答by omkar patade
I had the same problem. Try following code
我有同样的问题。试试下面的代码
var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
It keeps the drawing as it is
它保持绘图原样
回答by user11825145
One thing that worked for me was to use requestAnimationFrame().
对我有用的一件事是使用requestAnimationFrame().
let height = window.innerHeight;
let width = window.innerWidth;
function handleWindowResize() {
height = window.innerHeight;
width = window.innerWidth;
}
function render() {
// Draw your fun shapes here
// ...
// Keep this on the bottom
requestAnimationFrame(render);
}
// Canvas being defined at the top of the file.
function init() {
ctx = canvas.getContext("2d");
render();
}
回答by u6045817
I also met this problem.but after a experiment, I found that Resizing the canvas element will automatically clear all drawings off the canvas! just try the code below
我也遇到过这个问题。但是经过实验，我发现Resizing the canvas元素会自动清除画布上的所有绘图！试试下面的代码
<canvas id = 'canvas'></canvas>
<script>
var canvas1 = document.getElementById('canvas')
console.log('canvas size',canvas1.width, canvas1.height)
var ctx = canvas1.getContext('2d')
ctx.font = 'Bold 48px Arial'
var f = ctx.font
canvas1.width = 480
var f1 = ctx.font
alert(f === f1) //false
</script>
