jCanvas - 背景圖像消失

Question

我使用這個http://projects.calebvans.me/jcanvas/並且我有簡單的例子

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

如果我點擊按鈕 bt，然后懸停畫布 div，我的背景就會消失，我該如何在背景上繪制新圖像

Answer 1

您的背景被擦除，因為您使用的是ctx.drawImage ，它不會創建 jCanvas 層。 jCanvas 圖層和非圖層不能存在於同一個畫布上，因為當 jCanvas 重繪畫布時（通過drawLayers()手動或觸發事件時自動），非圖層將被擦除。

為了解決這個問題，簡單地得出"tank_usa.jpg"像你畫'facesSmall.png' ：使用addLayer與type: 'image'集。

$('#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();
});