Javascript 无法清除画布

我真的很难重新设置/清除画布上的内容。我目前正在使用：插件生成一个自由形式的画布。它正是我所需要的，但是，它似乎没有一个简单的画布“重置”函数调用来清除内容

jsfiddle：

注意：我读到“宽度”方法在chrome中不起作用，而且这两种方法似乎在“自由形式”画布上都不起作用，但仅在形状上起作用，我没有测试过

这就是我迄今为止所尝试的：

加价

<div class="signature-field">
            Signature:
    <span class="sketch-container">
            <canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
            <span class="save-signature">Save Signature</span>
            <span class="reset-canvas">Reset Canvas</span>
    </span>
    Date: <input type="text"><br/><br/>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text">
</div>

方法2：

  $('.reset-canvas').click(function() {
           canvas.width = canvas.width; 
   });

方法3：

$('.reset-canvas').click(function() {
       var myCanvas = document.getElementById("simple_sketch");
       var ctx = myCanvas.getContext('2d');
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
 });

试试这个：

var ctx = myCanvas.getContext('2d');
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.restore();

试试这个：

var ctx = myCanvas.getContext('2d');
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.restore();

试试这个：

sketchpad插件保留了一系列“动作”，并在每次更新时重新绘制它们（这看起来确实不必要，但不管怎样）

var sktch=$（'simple_sketch'）。sketch（）；//存储对元素的引用。
var cleancavas=$（'simple#u sketch'）[0]；
$（'.save signature'）。单击（函数（）{
/*用图像替换画布*/
var canvas=document.getElementById（“简单草图”）；
var img=canvas.toDataURL（“image/png”）；
$（'simple_sketch'）。替换为（''；
$（'.signature buttons'）。替换为（''）；
});
$（'.reset canvas'）。单击（函数（）{
sktch.sketch（）.actions=[]；//此行清空操作。
var myCanvas=document.getElementById（“简单草图”）；
var ctx=myCanvas.getContext（'2d'）；
clearRect（0，0，myCanvas.width，myCanvas.height）；
});

试试这个：

sketchpad插件保留了一系列“动作”，并在每次更新时重新绘制它们（这看起来确实不必要，但不管怎样）

var sktch=$（'simple_sketch'）。sketch（）；//存储对元素的引用。
var cleancavas=$（'simple#u sketch'）[0]；
$（'.save signature'）。单击（函数（）{
/*用图像替换画布*/
var canvas=document.getElementById（“简单草图”）；
var img=canvas.toDataURL（“image/png”）；
$（'simple_sketch'）。替换为（''；
$（'.signature buttons'）。替换为（''）；
});
$（'.reset canvas'）。单击（函数（）{
sktch.sketch（）.actions=[]；//此行清空操作。
var myCanvas=document.getElementById（“简单草图”）；
var ctx=myCanvas.getContext（'2d'）；
clearRect（0，0，myCanvas.width，myCanvas.height）；
});

也许这会有帮助？绘制此图像的代码在哪里？它是由用户使用自由形式的笔刷绘制的，每次都会有所不同。实际处理这种自由形式画笔功能的代码如下：您可以设置一个工作小提琴来演示您的问题吗？方法3中的x、y、w、h和context的值是多少

context.clearRect（0，0，canvas.width，canvas.height）

应该可以工作，只要适当的

context

和

canvas

在函数的范围内。也许这会有帮助？绘制此图像的代码在哪里？它是由用户使用自由形式的笔刷绘制的，每次都会有所不同。实际处理这种自由形式画笔功能的代码如下：您可以设置一个工作小提琴来演示您的问题吗？方法3中的x、y、w、h和context的值是多少

context.clearRect（0，0，canvas.width，canvas.height）

应该可以工作，只要适当的

context

和

canvas

在函数的范围内。谢谢回复。这种方法对我不起作用。它会清除画布，但当我在重置后尝试重新使用画布时，先前“清除”的图像会再次出现。感谢您的回复。这种方法对我不起作用。它会清除画布，但当我在重置后尝试重新使用画布时，先前“清除”的图像会再次出现。+1；只需注意一点：“动作”数组是一个非常有效的设计选择；例如，它使实现撤消功能变得容易得多。@Shmiddy，太棒了！非常感谢，我一直在想这个问题！：）非常感谢你；只需注意一点：“动作”数组是一个非常有效的设计选择；例如，它使实现撤消功能变得容易得多。@Shmiddy，太棒了！非常感谢，我一直在想这个问题！：）非常感谢你。

var sktch = $('#simple_sketch').sketch();  // store a reference to the element.
var cleanCanvas = $('#simple_sketch')[0];

$('.save-signature').click(function(){
    /* replace canvas with image */
    var canvas = document.getElementById("simple_sketch");
    var img    = canvas.toDataURL("image/png");
    $('#simple_sketch').replaceWith('<img src="'+img+'"/>');
    $('.signature-buttons').replaceWith('');
});
$('.reset-canvas').click(function(){
    sktch.sketch().actions = [];       // this line empties the actions. 
    var myCanvas = document.getElementById("simple_sketch");
    var ctx = myCanvas.getContext('2d');

    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});