（三）canvas繪制樣式
阿新 • • 發佈：2018-08-02
document ice 連接 scala fff utf-8 技術分享 mar black 
- beginPath()
- 對畫線點的一個開始限制
- moveTo()
- 畫線的起點，只在開頭使用
- 參數兩個x軸，y軸
- lineTo()
- 後續連線
- 兩個參數x軸，y軸
- stroke()
- 連線無填充
- fill()
- 填充，默認黑色
- closePath()
- 對畫線點的一個結束限制
- 自動起著連接起點的作用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>（二）canvas繪制多邊形</title>
</head>
<style>
* {margin: 0;padding: 0;}
body { background-color: black; }
#c1 { background-color: #fff; }
</style>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<script>
var oC = document.getElementById("c1");
var ctx = oC.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(300,200);
ctx.closePath();
ctx.stroke();//只進行連線
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,300);
ctx.lineTo(300,300);
ctx.closePath();
ctx.fill();//填充連線的多邊形
</script>
</body>
</html>
（三）canvas繪制樣式