图一:
图二:
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.strokeStyle = "rgb(255,0,0)"; //红色
context.save(); //状态入栈
context.strokeStyle = "rgb(0,0,255)"; //蓝色
context.save(); //状态入栈
context.strokeRect(10,10,100,100);
context.strokeStyle = "rgb(0,255,0)"; //绿色
context.beginPath();
context.arc(120,120,60,0,Math.PI,false);
context.closePath();
context.stroke();
context.restore();//context.strokeStyle = "rgb(0,255,0)"出栈,当前context.strokeStyle 为蓝色见图一第二个矩形
context.restore();//context.strokeStyle = "rgb(0,0,255)" 出栈,当前context.strokeStyle 为红色见图二第二个矩形
context.strokeRect(160,160,100,100);
});
</script>
</head>