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