canvas One(http://www.reibang.com/p/abf9eeadfa35)畫(huà)完線以后卷胯，接下來(lái)畫(huà)一個(gè)三角形沮峡。
- 值得注意的問(wèn)題：
canvas跟其他標(biāo)簽一樣稻据，也可以通過(guò)css來(lái)定義樣式恩掷。但這里需要注意的是：canvas的默認(rèn)寬高為300px * 150px,在css中為canvas定義寬高，實(shí)際上把寬高為300px * 150px的畫(huà)布進(jìn)行了拉伸等龙，如果在這樣的情況下進(jìn)行canvas繪圖督笆，你得到的圖形可能就是變形的效果芦昔。所以，在canvas繪圖時(shí)娃肿，應(yīng)該在canvas標(biāo)簽里直接定義寬高烟零。
畫(huà)一個(gè)三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #000;
}
canvas{
background:#fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
var oC = document.getElementById("canvas1");
var gd = oC.getContext("2d");//2d的，當(dāng)然也可以是3d的咸作，用WebGl可以實(shí)現(xiàn)
//以下主要畫(huà)了一個(gè)三角形
gd.strokeStyle = "#f00";//設(shè)置線的顏色锨阿，默認(rèn)為黑色
gd.fillStyle = 'rgba(255,255,0,0.5)';//填充顏色，默認(rèn)為黑色记罚，設(shè)置填充以后墅诡，lineWidth只能看到10
gd.lineWidth = 20;//設(shè)置線的寬度
gd.moveTo(200,260);
gd.lineTo(320,400);
gd.lineTo(270,180);
//gd.lineTo(200,260);//方法一：手動(dòng)閉合
gd.closePath();//方法二：自動(dòng)閉合
gd.stroke();
gd.fill();
},false);
</script>
</head>
<body>
<canvas id="canvas1" width="600" height="500">
瀏覽器需要更新！Ｍ┲恰末早！
</canvas>
</body>
</html>
效果圖：
Paste_Image.png
1、gd.stroke();和gd.fill();必須得有一個(gè)说庭，不然圖形無(wú)法顯示然磷，stroke()在畫(huà)布上繪制確切的路徑, fill()方法來(lái)填充圖像（默認(rèn)是黑色）。
2刊驴、gd.closePath();主要是用來(lái)自動(dòng)閉合圖形姿搜，沒(méi)有它，圖形只是一個(gè)折線捆憎。
3舅柜、lineWidth是20的時(shí)候卓缰，其實(shí)是中線左右各10卸勺，在效果圖中就可以看出，填充半透明背景以后奔缠，背景遮住了邊框的一半础拨，實(shí)際顯示邊框只有10氮块。
gd.lineJoin =>當(dāng)兩條線條交匯時(shí)绍载，創(chuàng)建邊角樣式
Paste_Image.png
gd.lineJoin = 'bevel';
Paste_Image.png
gd.lineJoin = 'round'
Paste_Image.png
gd.lineJoin = 'round'默認(rèn)效果圖如圖一，為尖角滔蝉。
