HTML 画布 - 绘图在调整大小时消失

Question

我在 HTML canvas 元素中创建了一个基本形状，效果很好。

当我调整画布大小时出现问题，画布中的所有绘图都消失了。 这是正常行为吗？ 或者是否有可用于停止此功能的功能？

解决此问题的一种方法是在调整画布大小时再次调用绘图函数，但是如果要绘制大量内容，这可能不是很有效。

最好的方法是什么？

这是示例代码的链接https://gist.github.com/2983915

Answer 1

调整大小时需要重新绘制场景。

设置画布的宽度或高度，即使您将其设置为与之前相同的值，不仅会清除画布，还会重置整个画布上下文。 任何设置的属性（ fillStyle 、 lineWidth 、剪辑区域等）也将被重置。

如果您无法从表示画布的任何数据结构中重绘场景，您始终可以通过将其绘制到内存画布、设置原始宽度并绘制内部画布来保存整个画布本身。记忆画布回到原来的画布。

这是保存画布位图并在调整大小后将其放回原处的一个非常简单的示例：

http://jsfiddle.net/simonsarris/weMbr/

Answer 2

每次调整画布大小时，它都会将自身重置为透明黑色， 如规范中所定义。

您将不得不：

• 调整画布大小时重绘，或者，
• 不要调整画布大小

Answer 3

如果您关心性能，另一种方法是使用去抖动。 它不会调整大小或重新绘制您拖动的每个位置。 但它只会在调整大小时调整大小。

 // Assume canvas is in scope
 addEventListener.("resize", debouncedResize );

 // debounce timeout handle
 var debounceTimeoutHandle;

 // The debounce time in ms (1/1000th second)
 const DEBOUNCE_TIME = 100; 

 // Resize function 
 function debouncedResize () { 
    clearTimeout(debounceTimeoutHandle);  // Clears any pending debounce events

 // Schedule a canvas resize 
 debounceTimeoutHandle = setTimeout(resizeCanvas, DEBOUNCE_TIME);
 }

 // canvas resize function
 function resizeCanvas () { ... resize and redraw ... }

Answer 4

我有同样的问题。 试试下面的代码

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;

它保持原样

Answer 5

对我有用的一件事是使用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();
}

Answer 6

当我不得不调整画布大小以将其调整到屏幕时，我遇到了同样的问题。 但我用这段代码解决了它：

 var c = document.getElementById('canvas'); ctx = c.getContext('2d'); ctx.fillRect(0,0,20,20); // Save canvas settings ctx.save(); // Save canvas context var dataURL = c.toDataURL('image/jpeg'); // Resize canvas c.width = 50; c.height = 50; // Restore canvas context var img = document.createElement('img'); img.src = dataURL; img.onload=function(){ ctx.drawImage(img,20,20); } // Restote canvas settings ctx.restore();

 <canvas id=canvas width=40 height=40></canvas>

Answer 7

我也遇到了这个问题。但是经过实验，我发现调整画布元素的大小会自动清除画布上的所有绘图！ 试试下面的代码

<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>