1.save()保存画布的所有状态
2.restore()恢复状态
3.translate(x,y)左右偏移量和上下偏移量
4.rotate(angle)旋转的角度
5.scale(scaleWidth,scaleHeight)缩放的长度和宽度(1=100%,0.5=50%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>day4-2</title>
<style type="text/css">
canvas{border:1px solid black;}
</style>
</head>
<body onload="draw()">
<canvas id="tutorial" width="150" height="150">
</canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial')
if(canvas.getContext){//判断浏览器是否支持getContext属性
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,150,150);
ctx.save();
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120)
ctx.save();
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5
ctx.fillRect(30,30,90,90);
ctx.restore()
ctx.fillRec