canvas是html5中很重要的一部分，我们可以用它来绘制各种平面图形， 3d图，动画等等。每每看到网上超炫的html5页面，首先立马下载下来，心里想着有一天自己也可以做出这样酷炫的效果，骚年你是不是这样的！
比如这样的：
还有这样的（这个是3d效果，点击图片进去看看吧）：
但是，功夫不是一天练成的，一门新技术不是你学着做个demo就掌握了的，我们先要一点一点地学习基础知识才行呀。刚开始学html5的时候，我们都会先接触到canvas，api给的方法有很多，我是这样学的，自己写个demo，一个方法一个属性的去试，看它出来是个什么样子的。在这里我主要标记一下，我在练习过程中，遇到的一些疑惑。总结一下canvas.save()和canvas.restore()， canvas.beginPath()和canvas.closePath()怎么用。先把代码拉出来：
canvas.save()和canvas.restore()用法：
save() 和restore()主要在对画布进行转换（如：扭曲，旋转，缩放等）时很用作用。save()方法是保存画布当前状态的，restore()是取出画布 保存的状态。比如现在要对画布进行多个动作处理，第一个动作进行了缩放处理，如果在没有缩放处理前保存一下空白状态，那么再进行第二个动作新建时也会有第 一个动作缩放效果的影响。所以最好在对画布多个动作处理前，先canvas.save()保存一下空白状态或者你希望后面动作需要出现的状态，当前动作处 理完了再canvas.restore()一下，取出保存的空白状态保证后面的动作不受影响。
/**图形变形**/
var c10 = document.getElementById("myCanvas10");
var cre10 = c10.getContext("2d");
cre10.fillStyle = "#eeeeff";
cre10.fillRect(0, 0, 300, 300);
cre10.save();
cre10.fillStyle = "rgba(255, 0, 0, 0.1)";
cre10.translate(50, 50);
cre10.scale(0.5, 0.5);
cre10.rotate(Math.PI/4);
cre10.fillRect(0, 0, 100, 100);
cre10.restore();
cre10.save();
cre10.fillStyle = "rgba(255, 0, 0, 0.2)";
cre10.rotate(Math.PI/4);
cre10.translate(100, 100);
cre10.scale(0.5, 0.5);
cre10.fillRect(0, 0, 100, 100);
cre10.restore();
cre10.save();
cre10.fillStyle = "rgba(255, 0, 0, 0.5)";
cre10.translate(130, 130);
cre10.scale(0.5, 0.5);
cre10.shadowOffsetX = 10;
cre10.shadowOffsetY = 10;
cre10.shadowColor = "rgba(100, 100, 100, 0.5)";
cre10.shadowBlur = 1.5;
cre10.fillRect(0, 0, 150, 150);
本来效果是这样的：
如果去掉canvas.save()和canvas.restore()以后就是这样的：
canvas.beginPath()和canvas.closePath()用法：
这两个经常应用在绘制线条和圆弧中，可以成对用，也可以单独用，他们两个没有必然的联系。beginPath()是告诉浏览器我要开始划线了记录一下，这里作为一个起始点。closePath()是闭合路径，将结束焦点和起始点用直线链接起来。如果没有有closePath()结束的话，就不会有直线去链接结束点和起始点。
两个一起用是这样的：
没有用closePath()关闭线条：
但是往往不用closePath()方法还可以达到很好的效果：
下面是我用canvas画的小房子，很难看但是也要写出来：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制图形</title>
<style type="text/css">
.canv{
border:1px #d3d3d3 solid;
margin:20px 10px;
}
</style>
</head>
<body>
<canvas class="canv" width="300" height="300" id="canvas01"></canvas>
<script>
window.onload = function(){
drawHouse("canvas01");
};
//绿瓦红房子
function drawHouse(id){
var canv = document.getElementById(id);
var canvas = canv.getContext("2d");
canvas.fillStyle = "#eeeeff";
canvas.fillRect(0, 0, 300, 300);
console.info("第一步：空白，啥也没有");
canvas.fillStyle = "green";
canvas.beginPath();
canvas.moveTo(150, 10);
canvas.lineTo(270, 110);
canvas.lineTo(30, 110);
canvas.closePath();
canvas.fill();
canvas.fillStyle = "black";
canvas.beginPath();
canvas.moveTo(80, 68);
canvas.lineTo(80, 20);
canvas.lineTo(100, 20);
canvas.lineTo(100, 52);
canvas.closePath();
canvas.fill();
console.info("第二步：先盖绿色的房顶，黑色的烟囱");
canvas.fillStyle = "red";
canvas.beginPath();
canvas.moveTo(50, 110);
canvas.lineTo(50, 300);
canvas.lineTo(250, 300);
canvas.lineTo(250, 110);
canvas.closePath();
canvas.fill();
console.info("第三步：刷红色的墙");
canvas.fillStyle = "blue";
canvas.beginPath();
canvas.moveTo(80, 140);
canvas.lineTo(80, 190);
canvas.lineTo(130, 190);
canvas.lineTo(130, 140);
canvas.closePath();
canvas.fill();
canvas.strokeStyle = "white";
canvas.beginPath();
canvas.moveTo(105, 140);
canvas.lineTo(105, 190);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.moveTo(80, 165);
canvas.lineTo(130, 165);
canvas.closePath();
canvas.stroke();
console.info("第四步：开个蓝色窗户白色的格子");
canvas.fillStyle = "white";
canvas.beginPath();
canvas.moveTo(150, 210);
canvas.lineTo(150, 300);
canvas.lineTo(210, 300);
canvas.lineTo(210, 210);
canvas.closePath();
canvas.fill();
canvas.fillStyle = "black";
canvas.beginPath();
canvas.arc(200, 255, 5, 0, Math.PI*2);
canvas.closePath();
canvas.fill();
canvas.save();
console.info("第五步：开一扇白色的门，黑把手");
}
</script>
</body>
</html>