畫布只是 HTML 頁面上的一個矩形區域。我們可以藉助 JavaScript 在這個矩形區域(Canvas)中繪製圖形。
Canvas 可以在 HTML5 中建立為 -
<canvas id = ”canvas1” width = ”250” height = ”150”></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中文網其他相關文章!