Javascript はキャンバスの円形消しゴムを実装します-フロントエンドQ&A-php.cn

Javascript はキャンバスの円形消しゴムを実装します

王林

リリース： 2023-05-17 15:17:07

オリジナル

1177 人が閲覧しました

フロントエンド開発において、キャンバスは非常に重要なテクノロジーであり、さまざまなグラフィックを描画したり、非常にクールな効果を実現したりすることができます。多くの場合、ユーザーが落書きや写真など、キャンバス上の一部の要素を消去できるように、消しゴム機能を実装する必要があります。この記事では、JavaScriptを使用してキャンバスの円形消しゴムを実装する方法を紹介します。

まず、キャンバス要素を作成し、そのコンテキストを取得する必要があります。

<html>
  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>
</html>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
</script>

ログイン後にコピー

次に、ユーザーが移動してキャンバスを消去できるように、キャンバスのマウスイベントをリッスンする必要があります。マウス要素がオンになります。次のコードを使用すると、これを実現できます。

let isErasing = false;

canvas.addEventListener("mousedown", () => {
  isErasing = true;
});

canvas.addEventListener("mouseup", () => {
  isErasing = false;
});

canvas.addEventListener("mousemove", (e) => {
  if (isErasing) {
    const x = e.offsetX;
    const y = e.offsetY;
    const radius = 20;

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.globalCompositeOperation = "destination-out";
    ctx.fill();
  }
});

ログイン後にコピー

コードの説明:

まず、ユーザーが消去しているかどうかを識別する変数 isErasing を作成します。
次に、キャンバスの mousedown イベントと mouseup イベントをリッスンしました。これらは、ユーザーがボタンを押して放したときに isErasing を変更するために使用されます。マウスの値。
最後に、canvas の mousemove イベントをリッスンし、isErasing が true の場合、マウスの座標と半径を取得します。 ctx.arc() メソッドを使用して円を描画し、ctx.globalCompositeOperation = "destination-out" を使用してそれをキャンバス上の要素と混合し、消しゴムの効果を実現します。

ここでは、globalCompositeOperation 属性の destination-out 値を使用していることに注意してください。これは、現在描画されているグラフィックのみが、キャンバス上に既に描かれているものと同じものになりますが、一部の図形の重なっている部分は消去されます。

さて、これでキャンバスの丸い消しゴム機能が実装されました。ユーザーが消しゴムをより使いやすくするために、現在の消去範囲の表示、消去色の変更などのインタラクティブな効果を追加することもできます。完全なコード実装は次のとおりです。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

let isErasing = false;
let eraserRadius = 20;
let eraserColor = "#ffffff";

canvas.addEventListener("mousedown", () => {
  isErasing = true;
});

canvas.addEventListener("mouseup", () => {
  isErasing = false;
});

canvas.addEventListener("mousemove", (e) => {
  if (isErasing) {
    const x = e.offsetX;
    const y = e.offsetY;

    ctx.beginPath();
    ctx.arc(x, y, eraserRadius, 0, 2 * Math.PI);
    ctx.globalCompositeOperation = "destination-out";
    ctx.fillStyle = eraserColor;
    ctx.fill();

    const eraser = document.getElementById("eraser");
    eraser.style.left = `${x - eraserRadius}px`;
    eraser.style.top = `${y - eraserRadius}px`;
    eraser.style.display = "block";
  }
});

canvas.addEventListener("mouseleave", () => {
  const eraser = document.getElementById("eraser");
  eraser.style.display = "none";
});

const eraserRange = document.getElementById("eraserRange");
eraserRange.addEventListener("input", () => {
  eraserRadius = parseInt(eraserRange.value);
  const eraser = document.getElementById("eraser");
  eraser.style.width = `${eraserRadius * 2}px`;
  eraser.style.height = `${eraserRadius * 2}px`;
});

const eraserColorPicker = document.getElementById("eraserColorPicker");
eraserColorPicker.addEventListener("input", () => {
  eraserColor = eraserColorPicker.value;
});

const eraser = document.getElementById("eraser");
eraser.style.width = `${eraserRadius * 2}px`;
eraser.style.height = `${eraserRadius * 2}px`;

ログイン後にコピー

コードの説明:

また、現在の消去半径を保存するための eraserRadius 変数と eraserColor変数。現在の消去色を保存するために使用されます。
HTML の <input> 要素と <div> 要素を使用して、動的にキャンバスコンバーターの外側に消しゴムサイズ設定と色の選択を作成しました。消しゴムのサイズや色を調整します。
ユーザーがマウスを動かすと、document.getElementById() を通じて消しゴムの DOM 要素を取得し、その left と top# を設定します。＃＃プロパティ。こうすることで、ユーザーは現在の消去範囲を確認できます。
最後に、ページの読み込み時に消しゴムのサイズを動的に設定します。

概要:

キャンバスと JavaScript を使用すると、カスタマイズ可能な円形消しゴムを簡単に実装できます。この消しゴムを使用すると、さまざまな落書き、写真、その他の要素を消去でき、ユーザーのインタラクティブなエクスペリエンスが向上します。実際のプロジェクトでは、ニーズに合わせてカスタマイズ開発を行うことで、より洗練された効果を実現します。

以上がJavascript はキャンバスの円形消しゴムを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。