canvas中如何保存当前状态（不是保存为图片）
用canvas画布做了一个涂鸦板，但有时会切换页面，所以想保存当前输入的内容到cookie内进行二次调用，但不知道该如何保存，save()方法似乎没什么用处，查了查资料说...
用canvas画布做了一个涂鸦板，但有时会切换页面，所以想保存当前输入的内容到cookie内进行二次调用，但不知道该如何保存，save()方法似乎没什么用处，查了查资料说它只保存状态，恢复不了画布内容。。我想问一下，有没有朋友知道怎么保存canvas的画布内容到变量内啊？
展开
1个回答
展开全部
1.保存和恢复绘图状态：
在绘制图形时，难免会重复使用某个样式，甚至有时会在不同颜色之间来回切换。
那么为了减少代码冗余，我们可以调用画布中的save()方法，来帮我们
保存一些样式和属性，这样我们就可以再通过调用restore() 方法，来再次使用这些我们曾保存好的样式和属性了！
下面看下具体代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>保存和恢复绘图状态</title>
<script type="text/javascript">
window.onload = function () {
//保存绘图状态 save
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.save(); //保存状态
context.fillRect(50, 50, 100, 100); //初始定义，绘制红色矩形
//恢复绘图状态 restore
context.fillStyle = "rgb(0,255,0)";
context.fillRect(200, 50, 100, 100); //绘制绿色矩形
context.restore(); //恢复画布状态
context.fillRect(350, 50, 100, 100); //恢复到初始定义，绘制红色矩形
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器暂不支持画布！
</canvas>
</body>
</html>
2.保存和恢复多个绘图状态：
多个绘图状态是如何保存的呢？
我们可以这么理解：有台复印机在大量的复印资料，最先复印的肯定是在最下层的，后来的一张张的累在上面，然后堆成一摞儿，
最上面的那份肯定是最后一次的复印操作，这个毋庸置疑！
保存状态其实就类似复印机的工作状态，最近保存的在最上层！
来看下代码怎么实现：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>保存和恢复绘图状态</title>
<script type="text/javascript">
window.onload = function () {
//保存绘图状态 save
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.save();
context.fillRect(50, 200, 100, 100); //第一个保存状态，绘制红色矩形
context.fillStyle = "rgb(0,0,255)";
context.save();
context.fillRect(200, 200, 100, 100); //第二个保存状态，绘制蓝色矩形
context.restore();
context.fillRect(350, 200, 100, 100); //恢复蓝色矩形的保存状态，因为它是最后的保存状态，所以它最先恢复。
context.restore();
context.fillRect(500, 200, 100, 100); //恢复红色矩形的保存状态。
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器暂不支持画布！
</canvas>
</body>
</html>
在绘制图形时，难免会重复使用某个样式，甚至有时会在不同颜色之间来回切换。
那么为了减少代码冗余，我们可以调用画布中的save()方法，来帮我们
保存一些样式和属性，这样我们就可以再通过调用restore() 方法，来再次使用这些我们曾保存好的样式和属性了！
下面看下具体代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>保存和恢复绘图状态</title>
<script type="text/javascript">
window.onload = function () {
//保存绘图状态 save
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.save(); //保存状态
context.fillRect(50, 50, 100, 100); //初始定义，绘制红色矩形
//恢复绘图状态 restore
context.fillStyle = "rgb(0,255,0)";
context.fillRect(200, 50, 100, 100); //绘制绿色矩形
context.restore(); //恢复画布状态
context.fillRect(350, 50, 100, 100); //恢复到初始定义，绘制红色矩形
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器暂不支持画布！
</canvas>
</body>
</html>
2.保存和恢复多个绘图状态：
多个绘图状态是如何保存的呢？
我们可以这么理解：有台复印机在大量的复印资料，最先复印的肯定是在最下层的，后来的一张张的累在上面，然后堆成一摞儿，
最上面的那份肯定是最后一次的复印操作，这个毋庸置疑！
保存状态其实就类似复印机的工作状态，最近保存的在最上层！
来看下代码怎么实现：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>保存和恢复绘图状态</title>
<script type="text/javascript">
window.onload = function () {
//保存绘图状态 save
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.save();
context.fillRect(50, 200, 100, 100); //第一个保存状态，绘制红色矩形
context.fillStyle = "rgb(0,0,255)";
context.save();
context.fillRect(200, 200, 100, 100); //第二个保存状态，绘制蓝色矩形
context.restore();
context.fillRect(350, 200, 100, 100); //恢复蓝色矩形的保存状态，因为它是最后的保存状态，所以它最先恢复。
context.restore();
context.fillRect(500, 200, 100, 100); //恢复红色矩形的保存状态。
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
您的浏览器暂不支持画布！
</canvas>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
