专栏首页Devops专栏Canvas绘制平行线以及解决直线模糊问题

Canvas绘制平行线以及解决直线模糊问题

绘画Canvas的平行线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var context = myCanvas.getContext('2d');

            /*绘制第一条线*/
            /*设置绘图的起始位置*/
            context.moveTo(100,100);
            /*绘制路径*/
            context.lineTo(200,100);

            /*绘制第二条线*/
            /*设置绘图的起始位置*/
            context.moveTo(100,200);
            /*绘制路径*/
            context.lineTo(200,200);
            
            /*描边*/
            context.stroke();
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>

浏览器显示如下:

可以从上图看到已经绘画出了两条直线作为平行线。但是有以下两个问题:

  • 绘制的直线默认宽度为多少? 从对比边框border的1px来看,直线看上去有2px的宽度。其实这个直线的绘制宽度默认也只有1px,那么怎么会看起来有2px呢?
  • 绘制的直线默认颜色是什么? 直接看上去直线的颜色像是灰色。但是其实默认的颜色是黑色。那么怎么看起来像是灰色呢?

直线模糊以及黑色变灰色的问题原理

其实在绘制直线的时候,默认是绘制1px的宽度,但是绘制直线的中轴线位置是在坐标轴刻度的上,如下:

另外因为两边的线宽度都被强行扩展,这样就导致黑色扩展变为了灰色。

解决模糊问题的方法

只要偏移直线中轴线位置不在刻度上就可以了,如下图:

那么下面将平行线的其中一条进行偏移看看,代码如下:

在y轴的方向进行偏移0.5px,浏览器显示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset

    上面绘画了三条平行线设置了末端样式,下面给三条平行线进行打折,使用lineJoin的方式设置拐点的样式。

    Devops海洋的渔夫
  • jqueryUI 自定义滚动条

    使用限制y轴运动的特性,写一个嵌套div,做成滚动条的形式。左边还有一个div,随着滚动条的滚动而改变上下位置。

    Devops海洋的渔夫
  • Canvas使用beginPath()绘画不同颜色的直线

    从图中可以看到,在每条直线都设置上了颜色和宽度,那么会不会画出三条不同颜色的直线呢?

    Devops海洋的渔夫
  • 当AI泡沫破裂时……

    很显然我们目前处于一个不稳定的状态。这到底是一场泡沫还是一次革命?答案是当然包含一点革命——深度神经架构所创造的实实在在的成功已经颠覆了视觉和语音识别领域,更通...

    机器之心
  • JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以...

    laixiangran
  • 化曲为直の神奇

    要学好人工智能、机器学习、统计、 计量、量化、优化等等和统计相关的内容, 少不了三大块数学: 微积分、线性代数和概率统计。 前面我们在“概率分布の三奥义”里面探...

    史博
  • [Skr-Shop]购物车之架构设计

    在上一篇文章 购物车设计之需求分析 描述了购物车的通用需求。本文重点则在如何实现上进行架构上的设计(业务+系统架构)。

    大愚
  • 学会这几个JS知识点,面试包你通过

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • 同样的的单细胞研究,为什么发表的文章杂志等级差别那么大

    让我想起来了另外一个COVID-19病毒感染病人的单细胞研究,发表在Cell Discov. 2020 May ,标题是:Immune Cell Profili...

    生信菜鸟团
  • 『中级篇』如何在mac上安装docker(五)

    IT故事会

扫码关注云+社区

领取腾讯云代金券