无法清除画布

Question

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

的jsfiddle： http://jsfiddle.net/k7fmq/

注：我读的是“宽”的方法不镀铬工作，似乎这两种方法都不对了“自由形式的”画布工作，但只在形状上，我没有测试。

这是我试过到目前为止：

标记

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

JQuery的（我的最新尝试）

$('.reset-canvas').click(function() { 
     var myCanvas = document.getElementById("#simple_sketch"); 
     var width = myCanvas.width; 
     myCanvas.width = width + 1; 

}); 

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

Answer 1

试试这个：http://jsfiddle.net/k7fmq/1/

画板插件保持 “行动” 的数组，并重绘他们每次更新（这似乎是不必要的，真的，但whatevs ）。

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

Answer 2

试试这个：

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