這是關(guān)于canvas的第三個小節(jié)择吊，還記得在第一小節(jié)中完成了哪些操作么？是的槽奕，關(guān)于直線的繪制几睛。那么本小節(jié)，就做一件有意思的事情粤攒，利用直線繪制一個三角形所森。
一、繪制三角形
繪制三角形按照之前的理解需要4組坐標(biāo)夯接，而實際上只要3組坐標(biāo)也能完成三角形的繪制焕济。在調(diào)用closePath()方法關(guān)閉繪制路徑之后，會將繪制路徑的最后一點與繪制路徑的起點連接起來盔几。
程序的完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示繪制矩形</title>
<script type="text/javascript">
window.onload=function(){
//獲取canvas對象的context（繪圖上下文）
var context=document.getElementById('canvas').getContext("2d");
//繪制三角形（自定義形狀）路徑
context.moveTo(200,60);
context.lineTo(70,180);
context.lineTo(300,180);
//關(guān)閉路徑
context.closePath();
//按順序路徑繪制圖形
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
瀏覽效果：
三角形繪制效果
二吼蚁、擴展繪制線型
繪制線型一直是用的實現(xiàn)，那么可不可換成虛線呢问欠？當(dāng)然可以肝匆。
虛線繪制三角形
關(guān)鍵代碼只有一行，其他的代碼不變顺献。setLineDash([array])方法需要傳入數(shù)組作為參數(shù)旗国。如果傳入一個參數(shù)就是線長和間距一樣。有興趣的注整，可以多傳幾個參數(shù)玩玩能曾。也許你能發(fā)現(xiàn)好玩的事情度硝。
//定義線型為虛線，線長4寿冕，間隔10
context.setLineDash([4,10]);
添加代碼的正確位置如下圖：
PS:這些都是簡單的開胃小菜蕊程，更多有趣的玩法敬請關(guān)注。
