javascript - 我的 Canvas 绘制像素化线

Question

我正在尝试使用一些 JavaScript 和 Canvas 绘制一个小图表。

我正在做这样的事情:

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 的宽度/高度

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

创建一个函数，找出屏幕的 20% 以像素为单位，然后在代码中设置宽度/高度。