今天是2016年04月25日，也是我学习JS的第12天。

今天学习的需要内容是html5的canvas！

◆ canvas

1.创建画布

<canvas id="mycanvas" width="1200px" height="500px"></canvas>

2.获取画布

var mycanvasEle = document.getElementById("mycanvas")

3.创建一支笔

var ctx = mycanvasEle.getContext("2d");

4.开始画图

ctx.beginPath();

5.内容

（1）直线：

ctx.moveTo(20,20); →开始坐标

ctx.lineTo(100,20); →结束坐标

（2）弧

ctx.arcTo(150,20,180,70,50);

（3）圆

ctx.arc(100, 100, 20, 0.5 * Math.PI, 2 * Math.PI);

（4）矩形

ctx.rect(200, 200, 100, 100); →会放入缓存

ctx.fillRect(50, 200, 100, 100); →不会放入缓存

ctx.fillStyle = "gray"; → 颜色

（5）文字

ctx.font = "20px 微软雅黑";

ctx.textBaseline = "top";

ctx.shadowBlur = 10; →在基线的什么位置

ctx.shadowColor="black";

ctx.fillText("阿杰，你好！！", 0, 0);

>_<貌似还有好多的属性要学习。。。。。

6.结束一部分

（1）填充： ctx.fill();

（2）描边： ctx.stroke();

7.结束一整块

ctx.closePath();

【每一块由“beginPath”开头，“closePath”结束。】