97

要素をいじったり、<canvas>線を引いたりしています。

対角線がアンチエイリアス処理されていることに気づきました。私がしていることにはギザギザの外観が好きです-この機能をオフにする方法はありますか？

4

15 に答える 15

72

1-pixelのような座標に線を引きますctx.lineTo(10.5, 10.5)。ポイントの上に 1 ピクセルの線を描くという(10, 10)ことは、その位置にあるこの1ピクセルが から9.5に到達することを意味し、その10.5結果、キャンバス上に 2 つの線が描画されます。

0.51 ピクセルの線がたくさんある場合に、描画する実際の座標に常に を追加する必要がないための良いトリックctx.translate(0.5, 0.5)は、最初にキャンバス全体に追加することです。

于 2010-07-19T09:34:04.773 に答える
71

画像の場合は now .context.imageSmoothingEnabled= false

ただし、線画を明示的に制御するものはありません。とを使用して独自の線を引く必要がある場合があります (難しい方法です) 。getImageDataputImageData

于 2008-10-12T14:52:11.520 に答える
23

Mozilla Firefox で実行できます。これをコードに追加します。

contextXYZ.mozImageSmoothingEnabled = false;

Opera では現在機能リクエストですが、すぐに追加されることを願っています。

于 2011-04-15T11:41:31.623 に答える
11

Bresenham のライン アルゴリズムなどのカスタム ライン アルゴリズムを使用してすべてを描画します。この JavaScript の実装を確認してください: http://members.chello.at/easyfilter/canvas.html

これであなたの悩みは必ず解決すると思います。

于 2014-03-21T16:55:48.430 に答える
8

画像を縮小してキャンバスに描画するときに問題が発生したことを付け加えたいと思います。アップスケーリング時には使用していませんでしたが、まだスムージングを使用していました。

私はこれを使用して解決しました：

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

この関数は次のように使用できます。

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

たぶん、これは誰かにとって役に立ちます。

于 2015-09-26T14:31:47.710 に答える
7 
ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

この組み合わせで1pxの細い線が綺麗に描けます。

于 2014-03-30T14:18:47.997 に答える
5

これを追加：

image-rendering: pixelated; image-rendering: crisp-edges;

canvas 要素の style 属性に追加すると、キャンバス上に鮮明なピクセルを描画するのに役立ちました。この素晴らしい記事を介して発見されました：

https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

于 2021-06-02T07:37:13.930 に答える
0

StashOfCode の回答に関する 2 つのメモ:

  1. グレースケールの不透明なキャンバスでのみ機能します（白でfillRectしてから黒で描画する、またはその逆）
  2. 線が細い（線幅1px程度）と失敗する場合があります

代わりにこれを行う方が良いです:

ストロークして で塗りつぶし#FFFFFF、次のようにします。

imageData.data[i] = (imageData.data[i] >> 7) * 0xFF

これにより、幅が 1px の線が解決されます。

それ以外は、StashOfCode のソリューションは完璧です。なぜなら、独自のラスター化関数を記述する必要がないからです (線だけでなく、ベジエ、円弧、穴のある塗りつぶされたポリゴンなどを考えてください...)。

于 2018-10-22T18:11:31.063 に答える