数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何在 HTML5 中将画布数据保存到文件中？
画布只是 HTML 页面上的一个矩形区域。我们可以使用 JavaScript 在此矩形区域（画布）中绘制图形。
画布可以在 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 等数据 URL
为此，我们将编写 −
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.
通过这种方式，我们可以将画布数据保存到 HTML5 中的文件中。
更新于： 2020 年 6 月 24 日
2K+ 浏览量
广告