Html5使用canvas作图线宽很粗

时间：2022-03-26 23:49:23

自己使用canvas画图是碰到的问题，在这里记录一下。我把lineWidth设置为1，但是很粗，而且发虚。代码如下：

 <script type="text/javascript">

     $(function () {

         draw();

     })

     function draw(){

         var fdCanvas = document.getElementById("frequencyDomainChart");

         var ctx = fdCanvas.getContext("2d");

         ctx.lineWidth = 1;

         ctx.beginPath();

         ctx.moveTo(0,0);

         ctx.lineTo(500,500);

         ctx.stroke();

     }

 </script>

 <style type="text/css">

     #frequencyDomainChart{

         height: 600px;

         width: 800px;

         border: 1px solid #000000;

     }

 </style>

 <body>

     <canvas id="frequencyDomainChart"></canvas>

 </body>

 </html>

显示出来之后发虚，然后网上各种找结果，最后发现是由于canvas没有设置height与width，css中设置的height与weight对canvas不管用。

 <style type="text/css">

     #frequencyDomainChart{

         border: 1px solid #000000;

     }

 </style>

 <body>

     <canvas id="frequencyDomainChart" height="600px" width="800px"></canvas>

 </body>

 </html>

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

相关文章