主页 / 问题 / 910235
Accepted
Daniil Dubchenko
Asked:2020-11-22 23:29:38 +0000 UTC2020-11-22 23:29:38 +0000 UTC

JS - 画布 - 半透明线条

  • 772

在画布上，我用不透明的颜色绘制了一个矩形的两个轮廓。在两个地方，矩形相交，理论上，第二个（上）矩形应该与第一个（下）重叠，但由于某种原因，它们的轮廓是混合的。 

const c=document.getElementById("myCanvas");
const ctx=c.getContext("2d");
ctx.strokeStyle="red";
ctx.strokeRect(20,20,150,100);
ctx.strokeStyle="gray";
ctx.strokeRect(50,50,200,200);
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

在此处输入图像描述

javascript

2 个回答

  1. 抗锯齿

    const c=document.getElementById("myCanvas");
const ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeStyle="red";
ctx.strokeRect(20,20,150,100);
ctx.strokeStyle="gray";
ctx.strokeRect(50,50,200,200);
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

    • 3
  2. Best Answer

    在坐标中绘制一像素线，例如ctx.lineTo(10.5, 10.5). 在坐标中绘制一个像素的线(10, 10)意味着该1像素位于从9.5到的坐标中10.5，这导致在画布上绘制两条线。

    一个有趣的方法是不要每次都添加0.5到真实坐标，如果有很多单像素线，ctx.translate(0.5, 0.5)一开始就使用。

    @allan答案的翻译

    const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.translate(0.5, 0.5);

ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100);
ctx.strokeStyle = "gray";
ctx.strokeRect(50, 50, 200, 200);
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

    • 2

相关问题