HTML5 toDataURL() du canvas

HTML5 La fonction toDataURL() du canvas peut capturer le contenu HTML5 Le contenu du canvas, les données retournées par la fonction toDataURL() sont une chaîne de caractères, représentant une URL codée contenant les données graphiques capturées.

Exemple en ligne

L'utilisation de la fonction toDataURL() du canvas peut capturer le contenu HTML5 Le contenu du canvas. Voici un exemple de code terminé :

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

Les données retournées par la fonction toDataURL() sont une chaîne de caractères, représentant une URL codée contenant les données graphiques capturées. La chaîne peut être affichée dans un élément textarea, comme suit :

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

Les données obtenues peuvent également être affichées dans une nouvelle fenêtre. Voici le code pour effectuer cette opération :

<canvas id="ex1" width="500" height="100" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</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>

Voici un exemple de Canvas avec certaines graphiques. Sous le Canvas, il y a deux boutons qui vous permettent de capturer les graphiques dessinés sur le Canvas et de les afficher dans la zone de texte sous les boutons, ou dans une nouvelle fenêtre.