在HTML画布上绘制平面形状会创建模糊边框

Question

我想在HTML画布上绘制平面形状，例如矩形，但每当我使用fillRect或rect然后fill时，结果都是某种形状的某种形状模糊的内在发光和阴影。有没有办法摆脱这些“光效”？

举个例子，这是我用过的一段代码：

var canvas = document.getElementById('map');
var ctx = canvas.getContext("2d");

ctx.fillStyle = c;
ctx.fillRect(x, y, w, h);

和产生的结果（发光和阴影）：

Answer 1

可能只是将canvas.width和canvas.height设置为与css样式相同的值。 当一些元素被css缩放时，它们通常会得到抗锯齿（画布和图像）。

df1 %>%
     arrange(HospNum_Id, as.Date(VisitDate, "%d/%m/%y")) %>% 
     group_by(HospNum_Id) %>%
     filter(any(which(EVENT=="EMR") > which(EVENT == "RFA")[1]))

某些浏览器也符合这些删除抗锯齿的样式  更多关于css here

的信息

Answer 2

我使用另一种绘制形状的方法：

var context = canvas.getContext("2d");
var rectX = 400, rectY = 300;

function draw() {
context.fillStyle = "#FFFF00"
context.fillRect(rectX, rectY, 100, 200);
}

draw();

这是结果的小提琴： https://jsfiddle.net/Sufi2425/fnd5es9a/