HTML5画布—线太粗_JavaScript

在过去的两天里，我一直在使用HTML5 canvas元素。 我试图画一个迷宫，但我处于停滞状态。 我画的线与lineWidth属性不一致。 厚约2像素。

我熟悉canvas元素的半像素问题，您需要从0.5开始，但是我不知道需要在代码中放置0.5 。

如果我没记错的话，如果要使垂直线保持一致，则x参数必须为.5，对于水平线，y值需要为.5？

    var canvas = document.getElementById("c"),
    c = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height,
    hallwayWidth = w * 0.10; /*18px*/

c.beginPath();
c.lineWidth = 4;
c.moveTo(0, 0);
c.lineTo(w / 3, 0);
c.moveTo(0, 0);
c.lineTo(0, h);
c.moveTo(w, 0);
c.lineTo(w, h);
c.moveTo(w / 3 + hallwayWidth, 0);
c.lineTo(w, 0);
c.moveTo(0, h);
c.lineTo(w / 2, h);
c.moveTo(w / 2 + hallwayWidth, h);
c.lineTo(w, h);

/*code for thick line*/
c.moveTo(hallwayWidth, 0);
c.lineTo(hallwayWidth, w / 3);

c.stroke();

您不需要使用0.5，当lineWidth为4时，您必须使用：

2代替0
(w-2)代替w
(h-2)代替h

 var canvas = document.getElementById("c"), c = canvas.getContext("2d"), w = canvas.width, h = canvas.height, hallwayWidth = w * 0.10, /*18px*/ l = 2; c.beginPath(); c.lineWidth = l*2; c.moveTo(l,l); c.lineTo(w / 3, l); c.moveTo(l, l); c.lineTo(l, hl); c.moveTo(wl, l); c.lineTo(wl, hl); c.moveTo(w / 3 + hallwayWidth, l); c.lineTo(wl, l); c.moveTo(l, hl); c.lineTo(w / 2, hl); c.moveTo(w / 2 + hallwayWidth, hl); c.lineTo(wl, hl); /*code for thick line*/ c.moveTo(hallwayWidth, l); c.lineTo(hallwayWidth, w / 3); c.stroke();

 canvas { display: block; margin: 0 auto; margin-top: 50px; /* border: 1px solid red; */ background:red; }

 <canvas id="c" width="200" height="200"></canvas>

另一种选择（避免角落出现“像素丢失”）：绘制2条不同的路径，并为“边界”使用lineWidth为8

 var canvas = document.getElementById("c"), c = canvas.getContext("2d"), w = canvas.width, h = canvas.height, hallwayWidth = w * 0.10; /*18px*/ c.beginPath(); c.lineWidth = 8; c.moveTo(0, 0); c.lineTo(w / 3, 0); c.moveTo(0, 0); c.lineTo(0, h); c.moveTo(w, 0); c.lineTo(w, h); c.moveTo(w / 3 + hallwayWidth, 0); c.lineTo(w, 0); c.moveTo(0, h); c.lineTo(w / 2, h); c.moveTo(w / 2 + hallwayWidth, h); c.lineTo(w, h); c.stroke(); /*code for thick line*/ c.beginPath(); c.lineWidth = 4; c.moveTo(hallwayWidth, 0); c.lineTo(hallwayWidth, w / 3); c.stroke();

 canvas { display: block; margin: 0 auto; margin-top: 50px; /* border: 1px solid red; */ background: red; }

 <canvas id="c" width="200" height="200"></canvas>

HTML5画布—线太粗

问题描述

1楼