2016-04-25

今天是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」結束。】