0

キャンバスの内容をリセット/クリアするのに非常に苦労しています。現在、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);
 });
4

2 に答える 2

7

これを試してください：http://jsfiddle.net/k7fmq/1/

スケッチパッド プラグインは「アクション」の配列を保持し、更新ごとにそれらを再描画します (これは実際には不要に思えますが、どうでもいいことです)。

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);
});
于 2012-12-10T19:35:27.703 に答える
0

これを試して：

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();
于 2012-12-10T16:59:27.040 に答える