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を設定する方法

推薦する

JavaScriptのスタックとコピーの詳細な説明

目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...

MySQL ステートメントコメントの紹介

MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

MySQL 演算子の具体的な使用法 (and、or、in、not)

目次1. はじめに2. 本文2.1 および演算子2.2 または演算子2.3 オペレーター2.4 no...

MySQLのワークベンチ例の詳細な説明

MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...

冗長カーネルを削除するLinuxディープインの実装方法

前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...

ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題

いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...

フロントエンドJSサンドボックスを実装するいくつかの方法についての簡単な説明

目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...

Vue-router ネストルーティングの詳細な説明

目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...

Ubuntu 18.04で国内ソースを変更する方法の例

Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...

Nofollowタグの書き方と使い方

「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...

Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

詳細なハードウェア情報を取得するための Linux のいくつかのコマンドの詳細な説明

Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...