只想说,我不使用CSS,但是在小尺寸的画布上画圈的质量非常差。
示例:jcanvas https://jsfiddle.net/tkdn2rv6/25/
例如,在konvajs上一切正常:konva https://jsfiddle.net/qup9s57y/23/
为什么图像太模糊?
我想使用jcanvas,因为它体积较小,并且使用jQuery。
答案 0 :(得分:1)
您必须使用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>
答案 1 :(得分:0)
我试图通过将它们放到一个常见的片段中来重现您的问题,并且质量看起来是一样的:
$('#Amount').rules("add", {
max: function (element) {
return $('#Total').val();
},
messages: {
max: "Amount exceeds total"
}
});
$('#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);