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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript キャンバスで回転アニメーションを実現
  • JS+canvas で円錐を描くサンプルコード
  • js キャンバスはガウスぼかし効果を実現します
  • 時計効果を実現する JavaScript キャンバスアニメーション
  • js+ca​​nvasで描画ボード機能を実現
  • JS Canvas インターフェースとアニメーション効果
  • JSはキャンバスを使用して回転する風車のアニメーションを描画します
  • JavaScript と Canvas を組み合わせてスポーツボールを描画する

<<:  MySQLデータベースを誤って削除した後にデータを回復するための手順

>>:  テキストまたはJSONを返すようにnginxを設定する方法

推薦する

CSS3 オーバーフロープロパティの説明

1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル (Windows 版)

1. はじめにプロジェクトではMySQLを使用しています。インターネット上の例を参考にインストール...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...

トラフィックの多いウェブサイト向けのソリューション

まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...

DockerにRabbitMQをインストールする詳細な手順

目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

Docker を使用した war パッケージ プロジェクトのデプロイの実装

Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

サイト全体を灰色にするCSSコードのまとめ

国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

Windows 10 で Ubuntu 20.04 LTS をアップデートする方法

2020 年 4 月 23 日、本日、Windows 上の Ubuntu 20.04 では、Ubun...

Javascript の奇妙な点をご存知ですか?

私たちのベテランの先人たちは、数え切れないほどのコードを書き、数え切れないほどの落とし穴に陥ってきま...

クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析

概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...