2016-04-25

最新推荐文章于 2019-11-01 14:18:06 发布

weixin_30512043

最新推荐文章于 2019-11-01 14:18:06 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cjy2016/p/5433600.html

今天是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);