Html5使用canvas作图线宽很粗

 

自己使用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>

 

 

线条终于不发虚了！！！！！！！！！

 

posted @ 2018-05-29 16:45  Erneste  阅读(3086)  评论(0)  编辑  收藏  举报