Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5キャンバスdrawImage（）でアンチエイリアスを適用するにはどうすればよいですか？

アンチエイリアスを使用するには、リサンプリングの品質を設定する必要があります。

ctx.imageSmoothingQuality = "low|medium|high"
オフスクリーンキャンバスを使用して、画像を半分に縮小します-

var c = document.createElement('canvas'),
ocx = c.getContext('2d');
c.width = img.width * 0.5;
c.height = img.height * 0.5;

ocxx.drawImage(img, 0, 0, c.width, c.height);

//画像をもう一度半分に減らして繰り返します

ocx.drawImage(c, 0, 0, c.width * 0.5, cc.height * 0.5);

  1. HTML5キャンバスにSVGファイルを描画する方法は？

    SVGをキャンバスに描画するには、SVG画像を使用する必要があります。まず、HTMLを含む要素を使用します。その後、SVG画像をキャンバスに描画する必要があります。 例 次のコードを試して、HTMLキャンバスにSVGファイルを描画できます <!DOCTYPE html> <html>    <head>       <title>SVG file on HTML Canvas </title>    </head>    <

  2. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>