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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

不言

Jun 11, 2018 pm 05:25 PM

canvasマウストラック

この記事では主に、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 サイトをご覧ください。

関連する推奨事項:

HTML5 を使用する Canvasで三角形や四角形などの多角形を描く方法

以上がキャンバスを使ってマウスを押しながら動かして軌跡を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。