キャンバスを使ってマウスを押しながら動かして軌跡を描く方法
この記事では主に、Canvas を使用してマウスを押しながら移動することで軌跡を描画するサンプル コードを紹介します。内容が非常に優れているので、参考として共有します。
概要
働き始めてから、vue、react、規則性、アルゴリズム、小さなプログラムなどについて書いてきましたが、canvasについては一度も書いたことはありません。
2018 年は、自分自身に小さな目標を設定してください。それは、Canvas を学ぶことであり、CSS3 では実現するのが難しいいくつかのアニメーションを Canvas を使用して実現できるようになるという効果が得られます。
この記事は、キャンバスを学習することで得られる最初の利点です。キャンバスを学習するときに多くの人が行う最初のデモは、もちろん私も実装しましたが、これについては説明しません。もっとシンプルなものもあります。
マウスを押したままにして軌跡を描きます
要件
キャンバスでは、キャンバスの初期状態では何もありません。次に、キャンバスにいくつかのマウスイベントを追加し、マウスを使用して、キャンバスに書きます。具体的な効果としては、マウスをキャンバス上の任意の点に移動し、マウスを押したままマウスの位置を移動すると、書き込みを開始できるようになります。
原理
まず、キャンバスが必要です。次に、キャンバス上のマウスの位置を計算し、onmousedown イベントと onmousemove イベントをマウスにバインドし、パスを描画します。マウスを放すと描画が終了します。
このアイデアは非常にシンプルですが、実装するにはいくつかのコツが必要な部分があります。
1. Canvas 要素を含む HTML ファイルが必要です。
これは幅800、高さ400のキャンバスです。なぜpxと書かなかったのですか？ああ、まだわかりませんが、キャンバスのドキュメントで推奨されています。
<!doctype html>
<html class="no-js" lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>canvas学习</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<canvas id="theCanvas" width="800" height="400"></canvas>
<script src="js/main.js"></script>
</body>
</html>2. 現在の環境がキャンバスをサポートしているかどうかを確認します。
main.js には、互換性を判断するための自己実行関数を記述します。「コード本体」が実装要件の中核となります。
(function() {
let theCanvas = document.querySelector('#theCanvas')
if (!theCanvas || !theCanvas.getContext) {
//不兼容canvas
return false
} else {
//代码主体
}
})()3. 2D オブジェクトを取得します。
let context = theCanvas.getContext('2d')
4. キャンバスに対する現在のマウスの座標を取得します。
なぜこの座標を取得する必要があるのですか?マウスはデフォルトで現在のウィンドウの相対座標を取得し、キャンバスはページ上のどこにでも配置できるため、実際のマウス座標を取得するには計算が必要です。
キャンバスに対するマウスの実際の座標の取得を関数にカプセル化します。抽象的だと感じる場合は、この操作が必要な理由をメモ用紙に描くと理解できます。
通常は、x-rect.left と y-rect.top になります。しかし、実際にはなぜ x -rect.left * (canvas.width/rect.width) なのでしょうか?
canvas.width/rect.width は、canvas 内のスケーリング動作を決定し、スケーリング倍数を見つけることを意味します。
const windowToCanvas = (canvas, x, y) => {
//获取canvas元素距离窗口的一些属性，MDN上有解释
let rect = canvas.getBoundingClientRect()
//x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
return {
x: x - rect.left * (canvas.width/rect.width),
y: y - rect.top * (canvas.height/rect.height)
}
}5. ステップ4のツール機能を使用して、キャンバスにマウスイベントを追加できます。
まず、onmousedown イベントをマウスにバインドし、moveTo を使用して座標の開始点を描画します。
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
}6. マウスを動かすとき、マウスの長押しイベントがないので、それを監視するにはどうすればよいですか?
ここで使用されているちょっとしたトリックは、onmousedown 内で onmousemove (マウス移動) イベントを実行して、マウスを監視して移動できるようにすることです。
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
//鼠标移动事件
theCanvas.onmousemove = (e) => {
//移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
let { x, y } = ele
context.lineTo(x, y)
context.stroke()
}
}7. マウスを放すと、パスは描画されなくなります。
onmouseup イベントで上記で監視されている 2 つのイベントを防ぐ方法はありますか? onmousedown と onmousemove を null に設定する方法はたくさんありますが、ここでは「switch」を使用しました。 isAllowDrawLine はブール値に設定され、関数が実行されるかどうかを制御します。具体的なコードについては、以下の完全なソース コードを参照してください。
ソースコード
は、index.html、main.js、utils.jsの3つのファイルに分かれています。ここではes6の構文を使用して開発環境を設定していますので、エラーは発生しません。コードを直接コピーして実行するとエラーが発生する場合は、ブラウザをアップグレードできない場合は、es6 の構文を es5 に変更できます。
1、index.html
上記は示されているため、繰り返しません。 。
2 , Canvas ではイベントをバインドできません。実際にバインドされるのはドキュメントとウィンドウです。ただし、ブラウザが自動的に判断してイベント処理を引き継いでくれるので、全く心配する必要はありません。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
HTML5 を使用する Canvasで三角形や四角形などの多角形を描く方法以上がキャンバスを使ってマウスを押しながら動かして軌跡を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
81
11
21
68
キャンバスを使用している学校はどこですか?
Aug 18, 2023 pm 05:59 PM
Canvas を使用している学校には、スタンフォード大学、MIT、コロンビア大学、カリフォルニア大学バークレー校などが含まれます。詳細な紹介: 1. スタンフォード大学は、主要なオンライン学習プラットフォームとして Canvas を使用しています。スタンフォード大学の教師と学生は、Canvas を使用してコースの内容を管理および伝達し、オンライン ディスカッション、課題の提出、試験などの機能を通じて学習します。2. マ州Polytechnic Institute と MIT もオンライン学習管理システムとして Canvas を使用しており、Canvas プラットフォームを通じてコース管理を行っています。3. コロンビア大学など。
キャンバス矢印プラグインとは何ですか?
Aug 21, 2023 pm 02:14 PM
キャンバス矢印プラグインには、1. シンプルで使いやすい API を備え、カスタムの矢印効果を作成できる Fabric.js、2. 矢印を描画する機能を提供し、さまざまな矢印を作成できる Konva.js が含まれます。スタイル; 3. 豊富なグラフィックス処理機能を提供し、さまざまな矢印効果を実現できる Pixi.js; 4. 矢印のスタイルやアニメーションを簡単に作成および制御できる Two.js; 5. さまざまな矢印効果を作成できる Arrow.js ; 6. 大まかな.jsでは、手描きの矢印などが作成できます。
キャンバスクロックの詳細は何ですか？
Aug 21, 2023 pm 05:07 PM
キャンバス時計の詳細には、時計の外観、目盛り、デジタル時計、時針、分針、秒針、中心点、アニメーション効果、その他のスタイルなどが含まれます。詳細な紹介: 1. 時計の外観、キャンバスを使用して時計の外観として円形の文字盤を描画し、文字盤のサイズ、色、境界線などのスタイルを設定できます; 2. 目盛り線、目盛り線を描画します。位置; 3. デジタル時計、現在の時と分を示すために文字盤にデジタル時計を描くことができます; 4. 時針、分針、秒針など。
html2canvas にはどのようなバージョンがありますか?
Aug 22, 2023 pm 05:58 PM
html2canvas のバージョンには、html2canvas v0.x、html2canvas v1.x などが含まれます。詳細な紹介: 1. html2canvas v0.x (html2canvas の初期バージョン) 最新の安定バージョンは v0.5.0-alpha1 です。これは、多くのプロジェクトで広く使用され、検証されている成熟したバージョンです。2. html2canvas v1.x、これは html2canvas の新しいバージョンです。
tkinter Canvas にはどのようなプロパティがありますか?
Aug 21, 2023 pm 05:46 PM
tkinter Canvas 属性には、bg、bd、relief、width、height、cursor、highlightbackground、highlightcolor、highlightthickness、insertbackground、insertwidth、selectbackground、selectforeground、xscrollcommand 属性などが含まれます。詳しい紹介
Edgeブラウザでマウスの移動軌跡を表示する方法_Edgeブラウザでマウスの移動軌跡を表示する手順
Apr 02, 2024 pm 05:30 PM
1. まずエッジ ブラウザを開き、挿入されたマウス ジェスチャ アイコンをクリックします。 2. ポップアップ ウィンドウの [設定] ボタンをクリックします。 3. 次に、詳細設定のショートカット リンクをクリックします。 4. 次に、ディスプレイマウストラック設定項目を見つけます。 5. 次に、設定項目の前にあるチェックボックスをオンにします。 6. このように、マウスジェスチャーを使用すると、マウスの軌跡が表示されます。
uniapp は、キャンバスを使用してチャートやアニメーション効果を描画する方法を実装します。
Oct 18, 2023 am 10:42 AM
キャンバスを使用して uniapp でチャートやアニメーション効果を描画する方法には、特定のコード例が必要です。 1. はじめに モバイル デバイスの普及に伴い、モバイル端末上でさまざまなチャートやアニメーション効果を表示する必要があるアプリケーションがますます増えています。 uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークとして、キャンバスを使用してチャートやアニメーション効果を描画する機能を提供します。この記事では、uniapp がキャンバスを使用してチャートやアニメーション効果を実現する方法を紹介し、具体的なコード例を示します。 2.キャンバス
キャンバス フレームワークを学び、一般的に使用されるキャンバス フレームワークについて詳しく説明します
Jan 17, 2024 am 11:03 AM
Canvas フレームワークを探索する: 一般的に使用される Canvas フレームワークを理解するには、特定のコード例が必要です。 はじめに: Canvas は HTML5 で提供される描画 API であり、これを通じて豊富なグラフィックスやアニメーション効果を実現できます。描画の効率と利便性を向上させるために、多くの開発者がさまざまな Canvas フレームワークを開発しました。この記事では、一般的に使用される Canvas フレームワークをいくつか紹介し、読者がこれらのフレームワークの使用方法をより深く理解できるように、具体的なコード例を示します。 1.EaselJSフレームワークEa
