我的画布绘制像素化线

Question

我正在尝试使用一些JavaScript和画布绘制一些图表。

我正在做这样的事情：

RadarChart.prototype.fillRadar = function () {
var nbLabel = this.data.labels.length;
this.context.save();
this.context.lineWidth = 0.5;
this.context.lineJoin = "round";
this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
this.context.strokeStyle = this.data.lineColor;
for (var i = 0; i < nbLabel; i++) {
    this.context.moveTo(0, 0);
    this.context.lineTo(0, -((this.canvas.height / 2) - 30))
    this.context.stroke();
    this.context.rotate((Math.PI / 180) * (360 / nbLabel));
}
this.context.restore();
}

问题是我的线条太像素化了，并不完美。它们的宽度似乎改变了。就像随着时间的流逝而消失...

为什么这样做呢？我该如何解决？

感谢帮助。

Answer 1

不要使用CSS设置画布的宽度/高度

使用 canvas.width = 500; canvas.height = 500;

创建一个函数，以找出屏幕上有20％的像素表示，然后在代码中设置宽度/高度。