2

イメージをキャンバスに描画し、ユーザーがその上に sketch.js でスケッチを描画できるようにしたいと考えています。現在の状況は次のとおりです。

  1.the image has been drawn on the canvas successfully
  2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
  3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)

そのため、両方の関数を正しく作成しましたが、その間の部分について混乱しています。イメージをキャンバスにスケッチを描きたいと思っています。これが私のコードです：

index.html:

<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>

canvas.js:

var mysketch = jQuery("#mysketch");

// draw the captured image to canvas 
    var displayImage = function() {
    var context = mysketch.get(0).getContext("2d");     
        var image = new Image();

        image.onload = function() {
            context.drawImage(image, 0, 0);
        }

    // prepend the required image info again
        image.src = dataURL;

        // call sketch.js to draw sketch on the canvas
    mysketch.sketch({defaultColor: "#ff0"});

    }
4

1 に答える 1

1

スケッチメソッドの呼び出しで、
sketch.jsは最初にキャンバスをクリアしてから、そこに何かを描画できるようになると思います。ここ
のリンクでわかるように、3番目の例（つまり、ツールの例）では、画像はdrawImageメソッドで描画されていません。 それは実際にはキャンバスの背景であり、あなたがそれに描くものは何でも、常に背景としてそこにあります。 つまり 、例と同じことを行うか、画像を背景として設定する か、キャンバスのすぐ後ろに同じ幅、高さ、同じ場所に新しいキャンバスを作成して、その上に画像を描画します。2番目のものでスケッチをします。






于 2012-10-12T07:13:41.320 に答える