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

背景

在绘制线段时,发现设置的线段宽度为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);
        // 指定一条轨迹(100,100 到 200,100)
        ctx.lineTo(200,100);
        // 开始描边(绘画)
        ctx.stroke();



        // 将线的宽度设置为2像素
        ctx.lineWidth = 2;
        ctx.beginPath(); //开始绘制路径
        // 移动画笔到X,Y轴为100,200的位置
        ctx.moveTo(100,200);
        // 指定一条轨迹(100,200 到 200,200)
        ctx.lineTo(200,200);

        // 开始描边(绘画)
        ctx.stroke();

        /*
        *注意:
        * 通过canvas绘制的线默认的宽度为1像素,默认的颜色值为黑色,但是绘制完成以后发现,线宽大概是2像素,而且线的颜色为黑灰色,造成这个现象的原因是,
        * */

    </script>

</body>
</html>
剩余70%内容付费后可查看
如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注