自己使用canvas畫圖是碰到的問題，在這里記錄一下。我把lineWidth設置為1，但是很粗，而且發虛。代碼如下：
1 <script type="text/javascript"> 2 3 $(function () { 4 draw(); 5 }) 6 7 function draw(){ 8 var fdCanvas = document.getElementById("frequencyDomainChart"); 9 var ctx = fdCanvas.getContext("2d"); 10 11 ctx.lineWidth = 1; 12 ctx.beginPath(); 13 ctx.moveTo(0,0); 14 ctx.lineTo(500,500); 15 ctx.stroke(); 16 } 17 18 </script> 19 20 <style type="text/css"> 21 #frequencyDomainChart{ 22 height: 600px; 23 width: 800px; 24 border: 1px solid #000000; 25 } 26 </style> 27 28 <body> 29 <canvas id="frequencyDomainChart"></canvas> 30 </body> 31 </html>
顯示出來之后發虛，然后網上各種找結果，最后發現是由於canvas沒有設置height與width，css中設置的height與weight對canvas不管用。
1 <style type="text/css"> 2 #frequencyDomainChart{ 3 border: 1px solid #000000; 4 } 5 </style> 6 7 <body> 8 <canvas id="frequencyDomainChart" height="600px" width="800px"></canvas> 9 </body> 10 </html>
線條終於不發虛了！！！！！！！！！