jCanvas - 背景圖像消失

Question

IM使用此http://projects.calebevans.me/jcanvas/ 和IM有簡單的例子

<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 IM點擊，和懸停帆布格，我的背景消失 我怎麼能做什麼新的圖像繪製背景

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