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>

在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

作为塞巴斯蒂安答案的附录：画布图像的“块状”位于屏幕分辨率，画布尺寸和样式属性的汇合处。根据这些因素，图像可能会或多或少地出现块状/锐利 - 但只有你可以做的事情。

有些人说，绘制到更大的画布并按比例缩小样式可以改善精细细节的外观 - 原则是小图像会产生很大的视觉效果，因此大尺寸的图像会看起来不那么块状 - 而其他图像则不然信服。

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

(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>

在arc（）函数中，HTML5画布线是blury

2 个答案: