面料js克隆畫布並繼續編輯

我想克隆面料js畫布並繼續編輯克隆畫布中的現有面料js對象，但它不起作用。它顯示setBackgroundImage是未定義的。面料js克隆畫布並繼續編輯

$('#btnClick').on('click touchstart', function() { 
 
    var canvas = document.getElementsByTagName("canvas"); 
 
    // canvas context 
 
    var context = canvas[0].getContext("2d"); 
 
    // get the current ImageData for the canvas 
 
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height); 
 
    // store the current globalCompositeOperation 
 
    var compositeOperation = context.globalCompositeOperation; 
 
    // set to draw behind current content 
 
    context.globalCompositeOperation = "destination-over"; 
 
    //set background color 
 
    context.fillStyle = "#FFFFFF"; 
 
    // draw background/rectangle on entire canvas 
 
    context.fillRect(0,0,canvas[0].width,canvas[0].height); 
 

 
    var tempCanvas = document.createElement("canvas"), 
 
    tCtx = tempCanvas.getContext("2d"); 
 
    
 
    tempCanvas.width = 640; 
 
    tempCanvas.height = 480; 
 
    
 
    tempCanvas.setBackgroundImage(''); 
 
}

<canvas><canvas>

來源

2015-11-15 stackdisplay

JavaScript的畫布上沒有任何的API了setBackgroundImage。可能你應該通過創建它來使用這個畫布的結構對象 – Fisherman

，儘管你可以通過CSS來爲畫布添加背景'''canvas {background：url（img.jpg）}''' – Fisherman

使用布庫的想法是使用它的方法來簡化您的工作。您不會直接與畫布元素進行交互。

畫布loadFromJSON和toJSON方法是你可以用來克隆你的畫布副本，包括backgroundimage。

var canvas = new fabric.Canvas('canvas'); 
 
var canvas2 = new fabric.Canvas('canvas2'); 
 
$(document).ready(function() { 
 
    var rect = new fabric.Rect({width: 100, height:200, fill: 'red'}); 
 
    canvas.add(rect); 
 
    var circle = new fabric.Circle({radius: 80, fill: 'blue'}); 
 
    canvas.add(circle);   
 
    $('#clone').click(
 
     function(){canvas2.loadFromJSON(JSON.stringify(canvas), function(){canvas2.renderAll()}); }) 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"> 
 
</canvas> 
 
<input id="clone" type="button" value="clone canvas"> 
 
<canvas id='canvas2' width="500" height="400" style="border:#000 1px solid;"> 
 
</canvas>

來源

2015-11-15 10:17:43 AndreaBogazzi

面料js克隆畫布並繼續編輯

回答

相關問題