2016-04-26

标签：

今天是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”结束。】

2016-04-26

标签：

原文地址：http://www.cnblogs.com/cjy2016/p/5440392.html