首頁 > web前端 > html教學 > 如何在HTML5中將畫布資料儲存到檔案中?

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

WBOY
發布: 2023-09-08 11:57:02
轉載
940 人瀏覽過

如何在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(&lsquo;cimg&rsquo;).src = imgurl; // This will set img src to dataurl(png)
so that it can be saved as image.
登入後複製

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

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

相關標籤:
來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板