如何在HTML5中將畫布資料儲存到檔案中？

畫布只是 HTML 頁面上的一個矩形區域。我們可以藉助 JavaScript 在這個矩形區域（Canvas）中繪製圖形。

 Canvas 可以在 HTML5 中建立為 -

<canvas id = &rdquo;canvas1&rdquo; width = &rdquo;250&rdquo; height = &rdquo;150&rdquo;></canvas>                                 

這會建立一個名為canvas1、寬度=200、高度=100的空白畫布。

要繪製圖形，我們使用JavaScript -

var canvas = document.getElementById("Canvas1");
 var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0,0); ctx1.lineTo(300,200);
 ctx1.stroke(); // This method actually draw graphics as per context object             

要儲存此圖形，我們需要將其儲存為一些資料網址，例如img.png 或img.jpg

#為此，我們將寫-

var imgurl= canvas.toDataURL( ) ; / / This method saves graphics in png
document.getElementById(‘cimg’).src = imgurl; // This will set img src to dataurl(png)
so that it can be saved as image.

這樣，我們就可以將canvas資料儲存到HTML5的檔案中。

以上是如何在HTML5中將畫布資料儲存到檔案中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！