キャンバスを使ってマウスを押しながら動かして軌跡を描く方法-H5 チュートリアル-php.cn

キャンバスを使ってマウスを押しながら動かして軌跡を描く方法

不言

リリース： 2018-06-11 17:25:13

オリジナル

4525 人が閲覧しました

この記事では主に、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(&#39;#theCanvas&#39;)
    if (!theCanvas || !theCanvas.getContext) {
        //不兼容canvas
        return false
    } else {
        //代码主体
    }
})()

ログイン後にコピー

3. 2D オブジェクトを取得します。

let context = theCanvas.getContext(&#39;2d&#39;)

ログイン後にコピー

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 サイトをご覧ください。