仕事を始めて以来、vue、react、通常のルール、アルゴリズム、小さなプログラムなどについて書いてきましたが、canvas については一度も書いたことはありません。
2018 年、私は自分自身に小さな目標を設定しました。それは、Canvas を学び、CSS3 では実現するのが難しいいくつかのアニメーションを Canvas を使用して実現するという効果を達成することです。
この記事は、Canvas を学習することで得られる最初の利点です。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-compatibility content=ie=edge> <title>キャンバス学習< /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) { //キャンバスと互換性がありません 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 は、キャンバス内のスケーリング動作を決定し、スケーリング倍数を見つけることを意味します。
const windowToCanvas = (canvas, x, y) => { //キャンバス要素距離ウィンドウのいくつかのプロパティを取得します。MDN で説明されています let rect = Canvas.getBoundingClientRect() //x パラメーターと y パラメーターはそれぞれマウスから渡されますウィンドウ座標の距離を計算し、キャンバスとウィンドウの左および上との間の距離を減算します。 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) { //キャンバスを基準にしてマウスが押された点の座標を取得します。 let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //es6の代入を分解 let { x, y } = ele //描画の開始点。 context.moveTo(x, y)}6. マウスを動かしてもマウス長押しイベントがありません。それを監視するにはどうすればよいですか?
ここで使用されているちょっとしたトリックは、onmousedown 内で onmousemove (マウス移動) イベントを実行し、マウスを監視して移動できるようにすることです。
theCanvas.onmousedown = function(e) { //キャンバスを基準にしてマウスが押された点の座標を取得します。 let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //es6の代入を分解 let { x, y } = ele //描画の開始点。 context.moveTo(x, y) //マウス移動イベント theCanvas.onmousemove = (e) => { //移動時に新しい座標位置を取得し、lineTo を使用して現在の座標を記録し、ストロークで前の点を描画します現在のポイントのパス let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.steroid() }}7. マウスを放すと、パスは描画されなくなります。
上記の onmouseup イベントで監視される 2 つのイベントを防ぐ方法はありますか? onmousedown と onmousemove を null に設定する方法はたくさんありますが、ここではスイッチを使用しました。 isAllowDrawLine はブール値に設定され、関数が実行されるかどうかを制御します。具体的なコードについては、以下の完全なソース コードを参照してください。
ソースコードIndex.html、main.js、utils.js の 3 つのファイルに分かれています。ここでは es6 の構文を使用して開発環境を構築しているので、コードを直接コピーしてもエラーは発生しません。 , 実行時にエラーが発生してブラウザをアップグレードできない場合は、es6 の構文を es5 に変更できます。
1.index.html
これについては上で示したので繰り返しません。
2.main.js
import { windowToCanvas } from './utils'(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext ('2d') let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { let ele = windowToCanvas(theCanvas 、e.clientX、e.clientY) let { x, y } = ele context.lineTo(x, y) context.ストローク() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** キャンバス上のマウスの座標を取得します* */const windowToCanvas = (canvas, x, y) => { let rect = Canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width /rect .width), y: y - rect.top * (canvas.height/rect.height) }}export { windowToCanvas}要約するここで誤解があります。実際には、canvas.onmouseup というイベントをバインドするために Canvas オブジェクトを使用します。実際にバインドされるのはドキュメントとウィンドウです。ただし、ブラウザが自動的に判断してイベント処理を引き継いでくれるので、全く心配する必要はありません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。