arc() 函数中的 HTML5 画布线条模糊

Question

我在元素上的线条模糊时遇到问题。

ctx.moveTo(2,2);
ctx.lineTo(50,2);
ctx.arc(27,2,25,0,3.1415926);
ctx.stroke();

我尝试将线宽设为 0.5，但这并没有解决问题。我尝试的一切似乎都没有任何作用。

结果非常像素化。 在https://rawgit.com/Mythius/uploads/master/Platformer.html上查看结果

如果有人知道如何解决这个问题，请告诉我。

Answer 1

Do not set your canvas size in CSS alone.

可以使用样式表更改画布的显示大小。图像在渲染过程中被缩放以适应样式大小。如果您的渲染看起来失真，请尝试在属性中明确指定您的宽度和高度属性，而不是使用 CSS。

默认画布大小

var canvas = document.getElementById('cnvs');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.translate(0.5, 0.5);

draw();

function draw() {

  ctx.moveTo(0, 0);
  ctx.lineTo(50, 0);
  ctx.arc(25, 0, 25, 0, Math.PI);
  ctx.stroke();

}

body {
  background-color: #aaa;
}

#cnvs {
  background-color: #fff;
  border: 1px solid #000;
}

<canvas id="cnvs"></canvas>

在画布元素属性上指定大小

var canvas = document.getElementById('cnvs');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.translate(0.5, 0.5);

draw();

function draw() {

  ctx.moveTo(0, 0);
  ctx.lineTo(50, 0);
  ctx.arc(25, 0, 25, 0, Math.PI);
  ctx.stroke();

}

body {
  background-color: #aaa;
}

#cnvs {
  width: 500px;
  height: 500px;
  background-color: #fff;
  border: 1px solid #000;
}

<canvas id="cnvs" width="500" height="500"></canvas>

Answer 2

作为 Sébastien 答案的补充：画布图像的“块状”位于屏幕分辨率、画布尺寸和样式属性的汇合处。根据这些因素，图像可能会出现或多或少的块状/锐利 - 但您能做的只有这么多。

有些人说，在较大的画布上绘图并按比例将其设置为较小的样式可以改善细节的外观 - 原理是小图像使大的看起来块状，因此大的图像看起来不那么块状 - 而其他人则不然深信不疑。

下面是一个 sn-p，它将相同的内容以两种不同的尺寸和分辨率绘制到四个画布上，但所有画布的样式都设置为相同的屏幕尺寸。他们在你的装备上有多块？对我来说，它们看起来几乎一样，但是当我保存它们时，我确实注意到了不同。

(function(doc) {

    function $(a) {
        switch (a.slice(0, 1)) {
            case "#":
                return doc.getElementById(a.slice(1));
            case ".":
                return [].slice.call(doc.getElementsByClassName(a.slice(1)));
        }
    }

    function save(e) {
        var cnv = $(e.target.getAttribute('data-canvas')),
            lnx = $('#savelink');

        lnx.href = cnv.toDataURL();
        lnx.download = e.target.getAttribute('data-res') +
            '_ ' + cnv.width + 'x' +
            cnv.height + '.png';

        lnx.click();
    }

    function lowRes(cnv, ctx) {
        var img = new Image;

        img.addEventListener('load', function() {
            ctx.clearRect(0, 0, cnv.width, cnv.height);
            ctx.drawImage(this, 0, 0);
        });

        img.src = cnv.toDataURL('image/jpeg', 0.64);
    };

    function draw(id, wh, lw, res) {
        var cnv = $(id),
            ctx = cnv.getContext('2d'),
            xy = wh / 2,
            fc = 8,
            shrink = (xy * 0.9) / fc,
            flag = !1;

        cnv.width = wh,
        cnv.height = wh,

        ctx.lineWidth = lw;
        ctx.fillStyle = '#eee';

        ctx.fillRect(0,0,cnv.width,cnv.height);

        ctx.beginPath();
        ctx.moveTo(0, xy);
        ctx.lineTo(cnv.width, xy);
        while (--fc) {
            ctx.arc(xy, xy, shrink * fc, 0, Math.PI, flag);
            flag = !flag;
        }
        ctx.stroke();

        ctx.fillStyle = '#777';
        ctx.font = Math.round(cnv.height * 0.025) + 'px serif';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';

        ctx.beginPath();
        ctx.fillText(
            ('lineWidth = ' + lw +
            ', width/height = ' + wh + 'px, ' +
            (res ? 'low-res' : 'hi-res')),
            Math.round(cnv.width * 0.9),
            Math.round(cnv.height * 0.96)
        );

        res && lowRes(cnv, ctx);
    }

    doc.addEventListener('DOMContentLoaded', function() {
        [
            ['#c1', 500, 1, !1],
            ['#c2', 1500, 3, !1],
            ['#c3', 500, 1, !0],
            ['#c4', 1500, 3, !0]
        ].forEach(function(n) {
            draw.apply(null, n);
        });

        $('.save').forEach(function(n) {
            n.addEventListener('click', save, !1);
        });
    }, false);

}(document));

.ch {
    position:relative;
    width:500px;
    height:500px;
    border:1px solid #999;
    margin:2rem auto;
}
.ch canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
}
.ch .save {
    position:absolute;
    top:2%;
    left:2%;
    color:#aaa;
    font-size:2rem;
    font-weight:600;
    cursor:pointer;
    display:inline-block;
    transition:color 333ms;
}
.ch .save:hover {
    color:#000;
}

<div class="ch">
    <canvas id="c1"></canvas>
    <div class="save" title=" Save Image " data-canvas="#c1" data-res="hi">&#8681;</div>
</div>
<div class="ch">
    <canvas id="c2"></canvas>
    <div class="save" title=" Save Image " data-canvas="#c2" data-res="hi">&#8681;</div>
</div>
<div class="ch">
    <canvas id="c3"></canvas>
    <div class="save" title=" Save Image " data-canvas="#c3" data-res="lo">&#8681;</div>
</div>
<div class="ch">
    <canvas id="c4"></canvas>
    <div class="save" title=" Save Image " data-canvas="#c4" data-res="lo">&#8681;</div>
</div>

<a id="savelink" href="" download="" target="_blank"></a>