• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心
  • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 canvas画矩形时出现边框样式不一致的解决方法
    POST TIME:2021-10-16 23:35

    这两天需要用到同事HTML5画图的东东,发现里面画矩形的函数画出来的边框出现了样式不一致的问题,最后我通过一些排除法找到了问题的症结,现分享给大家。

    先附上HTML5画矩形的的代码:

    复制代码
    代码如下:

    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();

    context.rect(188.0, 50, 200, 100.375);
    context.fillStyle = 'white';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    context.stroke();
    </script>

    你会发现执行后边框样式不一样,明显底部很细。颜色也略有不同

    把context.rect(188.0, 50, 200, 100.375)修改为context.rect(188.0, 50, 200, 100)后,发现样式就完全一致了。
    由此说明:画矩形的时候,如果里面的参数有不是整数的话,容易导致边框问题,所以建议大家取整后再用。

  • 相关文章
  • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信