我在 HTML 画布元素中创建了一个基本形状，效果很好。
当我调整画布大小时出现问题，画布中的所有绘图都消失了。这是正常行为吗？或者有没有可以用来阻止这个的功能？
解决此问题的一种方法是在画布调整大小时再次调用绘图函数，但是如果要绘制大量内容，这可能不是很有效。
最好的方法是什么？
这是示例代码的链接https://gist.github.com/2983915
问问题
16550 次
7 回答
30
调整大小时需要重新绘制场景。
设置画布的宽度或高度，即使您将其设置为与之前相同的值，不仅会清除画布，还会重置整个画布上下文。任何设置的属性（fillStyle、lineWidth、剪辑区域等）也将被重置。
如果您无法从代表画布的任何数据结构中重新绘制场景，您始终可以通过将整个画布绘制到内存中的画布、设置原始宽度并绘制 in-记忆画布回到原来的画布。
这是保存画布位图并在调整大小后将其放回的一个非常快速的示例：
于 2012-06-24T17:51:24.080 回答
3
于 2012-06-24T17:03:32.507 回答
1
如果您关心性能，另一种方法是使用去抖动。它不会调整或重绘您拖动的每个位置。但是只有在调整大小时才会调整大小。
// 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 ... }
于 2020-09-05T05:28:36.440 回答
0
我有同样的问题。试试下面的代码
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;
它使绘图保持原样
于 2018-11-15T06:36:32.093 回答
0
对我有用的一件事是使用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();
}
于 2019-07-23T13:50:28.710 回答
0
当我不得不调整画布大小以将其调整为屏幕时，我遇到了同样的问题。但我用这段代码解决了它：
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>于 2020-09-04T12:14:10.333 回答
-1
我也遇到了这个问题。但是经过实验，我发现调整画布元素大小会自动清除画布上的所有绘图！试试下面的代码
<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>
于 2017-09-15T04:22:13.323 回答