jCanvas - 背景画像は

Question

イムは、このhttp://projects.calebevans.me/jcanvas/ とイムは、ボタンBTにイムクリックすると

<input type="button" class="bt" value="draw"/><br> 
    <canvas id="picture" width=1350 height=1350></canvas> 

とJS

var canvas = document.getElementById("picture"); 
var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = "tank_usa.jpg"; 
    img.onload = function(){ 
     ctx.drawImage(img, 0, 0); 
    } 
$(".bt").on("click",function(){ 
// Draw a resizable image 
$('#picture').addLayer({ 
    type: 'image', 
    draggable: true, 
    source: 'facesSmall.png', 
    fillStyle: '#fff', 
    strokeStyle: '#c33', 
    strokeWidth: 2, 
    x: 180, y: 150, 
    width: 200, height: 125, 
    handle: { 
    type: 'arc', 
    fillStyle: '#fff', 
    strokeStyle: '#c33', 
    strokeWidth: 2, 
    radius: 10 
    } 
}) 
.drawLayer(); 
}) 

を簡単な例を持っている、とキャンバスのdivをホバー使用消え、私のバックグラウンドは を消えます新しい画像を背景に描画する方法を教えてください

Answer 1

を使用しているため、背景が消去されます、jCanvasレイヤーを作成しません。 jCanvasが（手動でdrawLayers()を介して、またはイベントがトリガされると自動的に）キャンバスを再描画するとき、非レイヤーが消去されるため、同じキャンバスにjCanvasレイヤーと非レイヤーが存在することはできません。

これを修正するには、'facesSmall.png'：addLayerとtype: 'image'を使用して描画したように、単に"tank_usa.jpg"を描画します。

$('#picture').addLayer({ 
    type: 'image', 
    source: 'tank_usa.jpg', 
    x: 0, y: 0, 
    fromCenter: false 
}); 
$(".bt").on("click",function(){ 
    // Draw a resizable image 
    $('#picture').addLayer({ 
     type: 'image', 
     draggable: true, 
     source: 'facesSmall.png', 
     fillStyle: '#fff', 
     strokeStyle: '#c33', 
     strokeWidth: 2, 
     x: 180, y: 150, 
     width: 200, height: 125, 
     handle: { 
      type: 'arc', 
      fillStyle: '#fff', 
      strokeStyle: '#c33', 
      strokeWidth: 2, 
      radius: 10 
     } 
    }) 
    .drawLayer(); 
});