Wie man eine Leinwand mit Helfer 'Klon' zieht?

Question

Ich habe eine einfache HTML-Leinwand

<div class='circle'> 
    <canvas id="myCanvas" width="100" height="100">Your browser does not support the HTML5 canvas tag.</canvas> 
</div> 

mit Stil

.circle { 
    height: auto; 
    width: auto; 
} 

und Skript

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fill(); 

$('.circle').draggable({ 
    helper: 'clone' // Remove this line to make it draggable 
}); 

Es scheint, dass ich nicht die Helfer Option verwenden können, wo ich eine Kopie behalten möchten der Kreis an der ursprünglichen Position, wenn ich ihn herum schleppe. Das ziehbare funktioniert nur, wenn ich die Hilfsoption entferne. Das ist nur mit Leinwand passiert, nicht wenn ich den Kreis mit CSS zeichne. Geige ist here. Vielen Dank!

Answer 1

Leider, wenn Sie ein Canvas-Element klonen, das kopiert nicht über die Bilddaten. Sie können stattdessen Ihre Canvas-Daten als Daten-URL exportieren und stattdessen das Bild klonen.

Fiddle: http://jsfiddle.net/gwwar/Bdpq9/2/

<div class='circle'> 
</div> 

var c = document.createElement("canvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fill(); 
var url = c.toDataURL(); 
var img = document.createElement("img"); 
img.setAttribute("src",url); 
$(".circle").append(img); 

$('.circle').draggable({ 
    helper: 'clone' // Remove this line to make it draggable 
}); 

Answer 2

Das ist, weil Klonen klont nur die Leinwand Element, nicht der Inhalt davon (Leinwand ist ein besonderes Element in dieser Hinsicht). Sie können Beweise dafür von marking the canvas sehen.

Sie müssen den Inhalt aus der ursprünglichen Leinwand auf die geklonte Instanz neu zu zeichnen:

/// you need to get these objects in advance, then: 
clonedContext.drawImage(originalCanvas, 0, 0);