Question

我的问题很简单，我在html画布上制作了一个绘图板。一切正常，除非我想要整理画布。

我使用此功能context.clearRect(0, 0, context.canvas.width, context.canvas.height);并且它工作正常，但大多数情况下画布直到我在浏览器上执行小滚动或任何操作后才会被清除（我甚至试图在滚动后以编程方式滚动它并且它没有工作）

在我看来，画布只在浏览器上的某个事件后刷新，但我不知道如何强制刷新。

知道发生了什么以及如何解决这个问题？

我的代码如下：

<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);
}

我发现这个问题只发生在电子

中

Answer 1

上下文变量仅在$（document）.ready（）范围内定义，请尝试：

<form onsubmit="return false" id="content" class="itemBlock" action="something.php" method="post">

或者：

$(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);
    }
});

清除画布在html没有刷新没有滚动电子

1 个答案: