我的画布绘制像素化线

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％的百分比表示，然后在代码中设置宽度/高度。