HTML5画布禁用基本体上的抗锯齿(曲线，..）

HTML5 canvas disable antialias on primitive (curves, ...)

本文关键字：曲线 布禁用 HTML5      更新时间：2023-09-26

如何禁用以下代码中的抗锯齿效果？我正在使用Chrome 29。

JSFiddle此处

var canvas = document.getElementById( 'test' );
var context = canvas.getContext( '2d' );
// These lines don't change anything
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
context.beginPath();
context.arc(100, 100, 100, 0, Math.PI * 2, true );
context.closePath();
context.fillStyle = 'red';
context.fill( );

imageSmoothingEnabled仅影响使用drawImage()绘制到画布上的图像（因此名称为imageSmoothingEnabled）。遗憾的是，没有办法对线条和形状禁用此功能。

与6502的答案和之前关于SO的答案一样，您需要实现"低级"方法来实现这一点。

以下是一些链接到各种基元的一些常见算法：

  • Bresenham线算法（见此答案以了解实现）
  • 中点圆算法（与椭圆相同）下面是一个实现
  • 贝塞尔曲线（在CodeProject中实现）

实现这一点的方法是从这些公式中获得x和y坐标。然后，您需要使用rect(x, y, 1, 1)，或者通过直接更改图像数据缓冲区来直接设置像素。对于这类事情，后者往往更快。

在这两种情况下，您都会有相对巨大的性能降低，因为您需要使用JavaScript进行迭代，而不是浏览器的内部编译迭代。

不幸的是，在画布上绘制时，没有可移植的方法来禁用抗锯齿。

我找到的唯一解决方案是重新实现直接在图像数据上书写的图形基元。

相关文章：