为什么 jCanvas 在小尺寸的画布上画出质量差的圆圈答案

【问题标题】：Why jCanvas draws poor quality circle on small sizes of canvas为什么 jCanvas 在小尺寸的画布上画出质量差的圆圈
【发布时间】：2019-01-19 15:51:40
【问题描述】：

只想说，我没用CSS，但是在小尺寸画布上画圈质量很差。

示例：jcanvas @987654321@

例如，在 konvajs 上一切正常：konva @987654322@

为什么图像如此模糊？

我想使用 jcanvas，因为它的尺寸更小并且使用 jQuery。

【问题讨论】：

标签： javascript jquery canvas konvajs jcanvas

【解决方案1】：

我试图通过将两者放入一个常见的 sn-p 来重现您的问题，并且质量看起来相同：

$('#canvas').drawArc({
  x: 20,  y: 20,  radius: 15,  strokeStyle: '#000',  strokeWidth: 1,
});

var circle = new Konva.Circle({
  x: 20,  y: 20,  radius: 15,  stroke: '#000',  strokeWidth: 1
});

var layer = new Konva.Layer().add(circle);
new Konva.Stage({container: 'container',  width: 40,  height: 40}).add(layer);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>

<div id="container"></div>
<canvas id="canvas"></canvas>

【讨论】：

【解决方案2】：

您必须使用 detectPixelRatio 解决方案：

$('canvas').detectPixelRatio(function(ratio) {
    $('#canvas').drawArc({
    x: 20,  y: 20,  radius: 15,  strokeStyle: '#000',  strokeWidth: 1,
  });
});



var circle = new Konva.Circle({
  x: 20,  y: 20,  radius: 15,  stroke: '#000',  strokeWidth: 1
});

var layer = new Konva.Layer().add(circle);
new Konva.Stage({container: 'container',  width: 40,  height: 40}).add(layer);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>

<div id="container"></div>
<canvas id="canvas"></canvas>

【讨论】：