HTML5画布线在arc（）函数中模糊

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

不要仅在CSS中设置画布大小。

可以使用样式表更改画布的显示大小。 在渲染期间缩放图像以适合样式大小。 如果渲染看起来失真，请尝试在属性中明确指定宽度和高度属性，而不要使用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

作为塞巴斯蒂安答案的补充：画布图像的“块状性”在于屏幕分辨率，画布尺寸和样式属性的融合。 根据这些因素，图像可能会出现或多或少的块状/清晰感-但是您只能做很多事情。

有人说，在较大的画布上绘制并按比例缩小样式可以改善精细细节的外观-原理是小图像看起来较大，所以大图像看起来较小，而其他人则不相信。

下面是一个片段，该片段将相同的内容绘制到具有两个不同大小和分辨率的四个画布上，但是所有画布的样式都与屏幕上的尺寸相同。 它们在您的装备上有多块？ 对我来说，它们看起来几乎一样，但是当我保存它们时，我确实注意到了不同。

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