HTML5 Canvas toDataURL()

HTML5 La función toDataURL() de Canvas puede capturar el contenido de HTML5 El contenido de canvas puede ser capturado por la función toDataURL() de Canvas, y los datos devueltos por la función son una cadena que representa una URL codificada que contiene los datos gráficos capturados.

Ejemplo en línea

La función toDataURL() de canvas puede capturar el contenido de HTML5 el contenido de canvas. Este es un ejemplo de código completo:

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

Los datos devueltos por la función toDataURL() son una cadena que representa una URL codificada que contiene los datos gráficos capturados. La cadena se puede mostrar en el elemento textarea, como se muestra a continuación:

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

También se puede mostrar los datos obtenidos en una nueva ventana. Este es el código para realizar esta operación:

<canvas id="ex1" ancho="500" altura="100" estilo="borde:　1px de ancho sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</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>

A continuación, se muestra un ejemplo de lienzo con ciertos gráficos. Debajo del lienzo hay dos botones que le permiten capturar los gráficos dibujados en el lienzo y mostrarlos en el área de texto debajo de los botones, o en una nueva ventana.