この記事では、お絵かきボード/サインボード機能を実現するための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. マウスを押して描画を開始します。マウスダウンイベント。 コードの説明 全体的な考え方は次のとおりです。マウスを押して移動スイッチをトリガーし、移動後に線の記録を開始します (移動後の座標 - 移動前の座標を使用して線を描画します)。各移動によって古い座標が更新されます。マウスを離した後、移動スイッチを離します。 1. 描画を移動する効果はマウスが押されたときにのみ発動されるため、状態判定を追加する必要があります。 カプセル化モジュール <キャンバス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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLデータベースを誤って削除した後にデータを回復するための手順
>>: テキストまたはJSONを返すようにnginxを設定する方法
目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...
1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
目次1. はじめに2. 本文2.1 および演算子2.2 または演算子2.3 オペレーター2.4 no...
MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...
前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...
いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...
目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...
目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...
Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...
「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...
これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...
この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...
Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...