您的位置：首页 > Web前端 > HTML5

HTML5 Cavans(4) 保存和恢复Cavans状态

2012-07-07 09:14 253 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
window.onload = function () {

var cancans = document.getElementById("myCanvas");
//得到2D渲染上下文
var context = document.getElementById("myCanvas").getContext("2d");

context.fillRect(0, 0, 100, 100);
context.fillStyle = "red";
context.fillRect(0, 0, 50, 50);

DisplayColor();
document.getElementById("btnRestore").onclick = function () {
context.restore();
DisplayColor();
alert("RestoredColor:" + context.fillStyle);
};

document.getElementById("btnDraw").onclick = function () {
context.fillRect(0, 0, 50, 50);
};

document.getElementById("btnSetColor").onclick = function () {
var color = document.getElementById("txtColor").value;
context.fillStyle = color;
DisplayColor();
};
document.getElementById("btnSave").onclick = function () {
context.save();
alert("SavedColor:" + context.fillStyle);
};

function DisplayColor() {
document.getElementById("spancolor").innerHTML = context.fillStyle;
}
};
</script>
</head>
<body>
<input type="button" id="btnRestore" value="Restore" >
<input type="button" id="btnSave" value="Save" >
<input type="button" id="btnDraw" value="Draw" >
<input type="button" id="btnSetColor" value="SetColor" >
<input type="text" id="txtColor" >
<span>currentColor:</span><span id="spancolor"></span>
<canvas id="myCanvas" height="300px" width="500px">
</canvas>
</body>
</html>

对2d渲染上下文调用save方法保存当前状态，restore方法恢复状态，状态是线宽，颜色等属性，不包括画出的图形

每次save都会把当前状态存入绘图栈，每次restore方法把绘图栈最晚进的取出设置为当前状态

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航