通过Canvas绘制线段时发现线变宽了颜色变淡了

郭宝

于 2021-04-12 18:41:46 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35366269/article/details/115634760

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

在使用Canvas绘制线段时，发现线宽不准确且颜色变淡。原因是Canvas在绘制时，线段的宽度会被扩展到整个像素宽度，导致视觉上的宽度增加和颜色变淡。解决方案是根据线段宽度的奇偶性，调整绘制时的中轴线位置，以保持预期的线宽和颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

在绘制线段时，发现设置的线段宽度为1像素和线段宽度为2像素的时，最终绘制出来的宽度大致一致，而且在没有设置画笔颜色的情况下，两条线段的颜色却不一样，详细参见以下示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        /* 获取canvas对象 */
        const canvas = document.getElementById('canvas');
        /* 获取上下文（绘制工具箱） */
        const ctx = canvas.getContext('2d');

        // 将线的设置为1像素
        ctx.lineWidth = 1;
        ctx.beginPath(); //开始绘制路径
        // 移动画笔到X，Y轴为100,100的位置
        ctx.moveTo(100,100);
        //