zoukankan      html  css  js  c++  java
  • 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>

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

    在全栈的道路上,积极向上、成熟稳重、谦虚好学、怀着炽热的心向前方的走得更远。
  • 相关阅读:
    虚幻4目录文件结构
    虚幻4编译手记
    几个重要的坐标系
    关于(void**)及其相关的理解
    装饰器总结篇(持续更新ing)
    Linux中find常见用法示例
    linux grep命令
    linux下IPTABLES配置详解
    分布式数据库中间件DDM的实现原理
    消息队列应用场景解析
  • 原文地址:https://www.cnblogs.com/DDgougou/p/9105874.html
Copyright © 2011-2022 走看看