この記事では、お絵かきボード/サインボード機能を実現するための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. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...
1. はじめにプロジェクトではMySQLを使用しています。インターネット上の例を参考にインストール...
Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....
目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...
まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...
目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...
オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...
目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...
国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...
<iframe src=”test.jsp” width=”100″ height=”50″ ...
2020 年 4 月 23 日、本日、Windows 上の Ubuntu 20.04 では、Ubun...
私たちのベテランの先人たちは、数え切れないほどのコードを書き、数え切れないほどの落とし穴に陥ってきま...
概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...