我在玩<canvas>元素，画线等等。
我注意到我的对角线是抗锯齿的。对于我正在做的事情，我更喜欢锯齿状的外观 - 有没有办法关闭此功能？
我可以关闭 HTML <canvas> 元素上的抗锯齿功能吗？
IT技术
javascript
html
canvas
antialiasing
2021-01-26 21:38:18
6个回答
画出你1-pixel像坐标系ctx.lineTo(10.5, 10.5)。在该点上绘制一条单像素线(10, 10)意味着，该1位置的该像素到达 from9.5到10.5这导致在画布上绘制两条线。
0.5如果您有很多单像素线，则不必总是将加到要绘制的实际坐标中的一个好技巧是ctx.translate(0.5, 0.5)在开始时添加到整个画布。
对于图像，现在有.context.imageSmoothingEnabled= false
但是，没有什么可以明确控制线条绘制。您可能需要使用和绘制自己的线条（困难的方法）。getImageDataputImageData
它可以在 Mozilla Firefox 中完成。将此添加到您的代码中：
contextXYZ.mozImageSmoothingEnabled = false;
在 Opera 中，它目前是一个功能请求，但希望它很快就会被添加。
它必须抗锯齿矢量图形
需要抗锯齿才能正确绘制涉及非整数坐标 (0.4, 0.4) 的矢量图形，但很少有客户这样做。
当给定非整数坐标时，画布有两个选项：
- 抗锯齿- 根据整数坐标与非整数坐标的距离（即舍入误差）绘制坐标周围的像素。
- Round - 对非整数坐标应用一些舍入函数（例如，1.4 将变为 1）。
后面的策略适用于静态图形，但对于小图形（半径为 2 的圆），曲线将显示清晰的台阶而不是平滑的曲线。
真正的问题是当图形被平移（移动）时 - 一个像素和另一个像素之间的跳跃（1.6 => 2, 1.4 => 1），意味着形状的原点可能相对于父容器跳跃（不断移动1 像素上/下和左/右）。
一些技巧
提示 #1：您可以通过缩放画布（例如 x）来软化（或强化）抗锯齿，然后自己将倒数比例 (1/x) 应用于几何图形（不使用画布）。
比较（无缩放）：
与（画布比例：0.75；手动比例：1.33）：
和（画布比例：1.33；手动比例：0.75）：
提示#2：如果您真的想要锯齿状的外观，请尝试将每个形状绘制几次（不要擦除）。每次绘制时，抗锯齿像素都会变暗。
比较。绘制一次后：
绘制三次后：
我会使用自定义线算法（例如 Bresenham 线算法）绘制所有内容。看看这个 javascript 实现：http : //members.chello.at/easyfilter/canvas.html
我认为这肯定会解决您的问题。