javascript - 清除html中的 Canvas 在 Electron 中没有滚动时不会刷新

Question

我的问题很简单，我用 html canvas 制作了一个画板。一切正常，除非我想清理整个 Canvas 。

我正在使用这个函数 context.clearRect(0, 0, context.canvas.width, context.canvas.height); 并且它工作正常，除了大多数时候 Canvas 直到我在浏览器上进行小滚动或任何操作后才会被清除(我什至尝试在滚动后以编程方式进行滚动，但它不起作用)

在我看来， Canvas 仅在浏览器上发生某个事件后刷新，但我不知道如何强制此刷新。

知道发生了什么以及如何解决它吗？

我的代码如下:

<span><input type="image" src="img/clear1.png" name="clear1" width="50" height="50" onclick="clear1()"></span>

$(document).ready(function(){
    var canvasDiv = document.getElementById('canvasDiv1');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    context = canvas.getContext("2d");
});    

function clear1(){
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
}

我发现这个问题只发生在Electron

Answer 1

上下文变量仅在 $(document).ready() 范围内定义，尝试一下:

$(document).ready(function(){
    var canvasDiv = document.getElementById('canvasDiv1');
    canvas = document.createElement('canvas');
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);
    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    context = canvas.getContext("2d");
    window.clear1 = function(){
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    }
});    

或者:

// global declaration
var context = null;
$(document).ready(function(){
//keep your logic here 

}); 
 function clear1(){
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 }