JSキャンバスは描画ボードと署名ボードの機能を実現します

この記事では、お絵かきボード/サインボード機能を実現するためのJSキャンバスの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

序文

一般的な電子教室の電子黒板。

この記事の特徴:

ネイティブJS
パッケージ化されたモジュール

最小限のコード例

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
</head>
<本文>
 <キャンバスid="キャンバス"></キャンバス>
 <スクリプト>
 c = document.getElementById('canvas');
 c.width = ウィンドウの内側の幅;
 c.height = ウィンドウの内側の高さ;
 ctx = c.getContext('2d') とします。

 // 黒板を1枚描く
 ctx.fillStyle = "黒";
 ctx.fillRect(0,0,600,300);

 // フラグを押す let onoff = false,
  古いx = -10、
  古い = -10;

 // 色を設定します let linecolor = "white";

 // 線の幅を設定する let linw = 4;

 // マウスイベントを追加 // 押す c.addEventListener('mousedown', event => {
  オンオフ = true;
  // Position - 10 は位置を修正し、描画をマウス ポインターの上部に配置します。oldx = event.pageX - 10;
  古い = イベント.ページY - 10;
 }、間違い）;
 // 移動 c.addEventListener('mousemove', event => {
  if(onoff == true){
  newx = event.pageX - 10 とします。
   newy = イベント.pageY - 10;

  // 描画 ctx.beginPath();
  ctx.moveTo(oldx,oldy);
  ctx.lineTo(newx,newy);
  ctx.strokeStyle = 線の色;
  ctx.lineWidth = linw;
  ctx.lineCap = "丸い";
  ctx.stroke();
  // 移動するたびに座標位置を更新します。oldx = newx、
  古いもの = 新しいもの;
  }
 }、 真実）;
 // ポップアップ c.addEventListener('mouseup', ()=> {
  オンオフ = false;
 }、間違い）;
 </スクリプト>
</本文>
</html>

結果

コードの説明

アイデア

1. マウスを押して描画を開始します。マウスダウンイベント。
2. マウスがポップアップして描画を終了します。マウスアップイベント。
3. マウスを押したまま動かしてパスを描きます。マウス移動イベント。

コードの説明

全体的な考え方は次のとおりです。マウスを押して移動スイッチをトリガーし、移動後に線の記録を開始します (移動後の座標 - 移動前の座標を使用して線を描画します)。各移動によって古い座標が更新されます。マウスを離した後、移動スイッチを離します。

1. 描画を移動する効果はマウスが押されたときにのみ発動されるため、状態判定を追加する必要があります。
2. マウスポインタと実際の位置の間にはオフセットがあるため、座標を配置する際には、座標がポインタの先端に配置されるようにpagex-10を増やす必要があります。
3. 移動するたびに座標位置を更新し、小さな線分を使用して不規則な線をシミュレートします。

カプセル化モジュール

<キャンバスid="キャンバス"></キャンバス>
<スクリプト>
 クラス Board{
 コンストラクタ(canvasName = 'canvas', data = new Map([
  ["オンオフ", false],
  ["古いx", -10],
  ["古い", -10],
  ["fillStyle", "黒"],
  ["線の色", "白"],
  ["線幅", 4],
  ["lineCap", "round"],
  ["キャンバス幅", ウィンドウの内側の幅],
  ["キャンバスの高さ", window.innerHeight]
 ])){
  // this.data = データ;
  this.c = document.getElementById(キャンバス名);
  this.ctx = this.c.getContext('2d');
  onoff をデータとして取得します。
  this.oldx = data.get("oldx");
  this.oldy = data.get("oldy");
  行の色を取得します。
  行幅を取得します。
  行頭文字をデータとして取得します。

  this.c.width = data.get("キャンバス幅");
  this.c.height = data.get("キャンバス高さ");

  this.ctx.fillStyle = data.get("fillStyle");
  ctx の塗りつぶし矩形を 0,0,600,300 に設定します。
 }

 イベント操作(){
  // マウスイベントを追加 // 押す this.c.addEventListener('mousedown', event => {
  this.onoff = true;
  // Position - 10 は位置を修正し、描画をマウス ポインターの上部に配置します。this.oldx = event.pageX - 10;
  this.oldy = イベント.pageY - 10;
  }、間違い）;
  // 移動 this.c.addEventListener('mousemove', event => {
  if(this.onoff == true){
   newx = event.pageX - 10 とします。
   newy = イベント.pageY - 10;

   // 描画 this.ctx.beginPath();
   this.ctx.moveTo(this.oldx,this.oldy);
   this.ctx.lineTo(newx,newy);

   this.ctx.strokeStyle = this.lineColor;
   this.ctx.lineWidth は、 this.lineWidth の略です。
   this.ctx.lineCap = this.lineCap;
   
   this.ctx.stroke();
   // 移動するたびに座標位置を更新します。this.oldx = newx,
   this.oldy = newy;
  }
  }、 真実）;
  // ポップアップ this.c.addEventListener('mouseup', ()=> {
  this.onoff = false;
  }、間違い）;
 }

 }

 ボードを新しいボード()にします。
 ボードイベント操作();
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: