ctx.translate(x,y) //将整个画布的原点平移到指定的点
ctx.sava(); //保存画笔当前的所有变形状态值（游戏中从存盘）
ctx.restore(); //恢复画笔变形状态到最近的一次保存（游戏中读取存盘）
ctx.save();//先保存原始状态
var deg = 10*Math.PI/180; //要旋转的角度 旋转10度
ctx.rotate(deg); //旋转
ctx.drawImage(img,0,0); //画图 ，画笔是歪的 画什么都是歪的
ctx.restore();// 取出存盘时保存的原始状态
（五）SVG绘图
先来了解一下什么是位图和矢量图。简单了解一下就可以。
位图：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻。 矢量图：由一个又一个线条组成，每个线条可以指定颜色，方向，可以无限缩放，但颜色细节不够丰富
一、SVG绘图 使用标签进行绘图，可以直接绑定事件监听
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100"></rect>
</svg> 二、如何js创建一个svg标签！
//var r1 = document.createElement('rect'); 创建不了这个svg元素 因为有年限和命名空间 （就是说这样不行 要用下面的方法创建！！！！）
var r1= document.createElementNS('http://www.w3.org/2000/svg','rect');
r1.setAttribute('width','50');
r1.setAttribute('height',300);
s1.appendChild(r1); 三、svg创建椭圆
<svg width="300" height="200" id="c6">
<ellipse rx="100" ry="40" cx="100" cy="100" fill="#faa" stroke="#a00"></ellipse>
</svg> 四、svg创建直线
<svg width="300" height="200" id="c6">
<line x1="0" y1="0" x2="100" y2="200" stroke="#000" stroke-width="50" stroke-linecap="square"></line>
</svg>注：stroke-linecap="square"有多出来的方形 ，stroke-linecap="round"多出来圆形的区域，stroke-linecap="butt"不出来多方形 （也就是说你创建的直线设置这些属性头尾有区别！自己试一下就知道了！细节很重要！）
五、svg创建折线
<svg width="300" height="200" id="c6">
<polyline points="50,50 100,300 150,100"></polyline> //出来的是三角形
<polyline points="50,50 100,300 150,100" fill="transparent" stroke="#000"></polyline> //出来的是折线
