HTML5 Canvas toDataURL()

HTML5 Die Funktion toDataURL() von Canvas kann HTML5 Inhalt des Canvas abgegriffen werden, die von der Funktion toDataURL() zurückgegebenen Daten sind ein String, der eine URL enthält, die die kodierten Grafikdaten des abgegriffenen Graphik darstellt.

Online-Beispiel

Mit der Funktion toDataURL() von Canvas kann HTML5 Inhalt des Canvas. Hier ist ein vollständiges Beispielcode:

var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

Die von der Funktion toDataURL() zurückgegebenen Daten sind ein String, der eine URL enthält, die die kodierten Grafikdaten des abgegriffenen Graphik darstellt. Der String kann im textarea-Element angezeigt werden, wie folgt:

var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();
document.getElementById("textArea").value = dataUrl;

Die Daten können auch in einem neuen Fenster angezeigt werden. Hier ist der Code, um dies zu tun:

<canvas id="ex1" width="500" height="100" style="border:　1px fest #cccccc;">
　　　　HTML5　Canvas nicht unterstützt
</canvas><script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.font　　　　　　=　"36px　Verdana";
context.fillStyle　=　"#000000";
context.fillText("HTML5　Canvas　Text",　50,　50);
context.font　　　　　　　　=　"normal　36px　Arial";
context.strokeStyle　=　"#000000";
context.strokeText("HTML5　Canvas　Text",　50,　90);
</script>

Nachstehend finden Sie ein Beispiel für eine Leinwand mit einigen Grafiken. Unter der Leinwand befinden sich zwei Schaltflächen, mit denen Sie die auf der Leinwand gezeichneten Grafiken erfassen und sie im Textbereich unter den Schaltflächen anzeigen können, oder sie in einem neuen Fenster anzeigen können.