• HTML5でjsonオブジェクトを使用するためのサンプルコード

    次のコード例では、HTML5でjsonオブジェクトを使用する方法を紹介します。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=devi

    2022-02-01 06:18:57
  • ウェブアプリのページスクロールラグの解決策を詳しく解説

    モバイルブラウザが現在のページをスクロールしているとき(場合によってはページのズームも)、デフォルトの動作がブロックされ、ページが強制的に静止するため、ページをスクロールするときに吃音感があり、ユーザーエクスペリエンスが低下します。 具体的には、touchstart イベントオブジェクトは true cancelable プロパティを持っているので、リスナーは preventDefault

    2022-02-01 05:24:27
  • HTML5タイマーrequestAnimationFrameの使い方を深く理解する。

    プリアンブル javascriptのアニメーションでは、常にタイマーが中心となっています。そして、アニメーションのループを書く上で重要なのは、どの程度の遅延が適切かを知ることです。一方では、ループの間隔は、さまざまなアニメーション効果がスムーズで流動的に見えるように十分に短くなければなりません。一方では、ループの間隔は、ブラウザが結果の変化をレンダリングする能力を確実に持つように十

    2022-02-01 03:41:10
  • HTML5によるメッセージ通知の利用(Web Notification)

    HTML5に関する記事をたくさん書いてきましたが、いつも思うのは、高度なAPIはすべてスルーしなければいけないということです。システムを理解し、より高いレベルから考えることで、より少ない労力でより多くのことを成し遂げられるようになることが重要なのです。 最初の外観 まず、一番簡単な例として chrome デベロッパーツールにコードを貼り付けて、以下のように直接実行します。

    2022-02-01 03:33:51
  • html5 postMessageのフロントエンドクロスドメインとフロントエンドのリスニング方式の例

    時には、フロントエンドでシングルサインオンをしろ!などという馬鹿げた要求もあります。要件を受けたら、解決策を考えなければなりません。 ここで、簡単なフロントエンドのシングルサインオンソリューションを作ってみましょう。 postMessageのクロスドメインメッセージングとonstorageのリスニングを使用しています。 この記事で使用した知識: KOA 静的リソースサービス

    2022-02-01 01:30:13
  • HTML5新タグの互換性 --> <! --<if lt IE 9><!endif--> の2つの方法があります。

    1つ目の方法 (html5shivを使用) &lt;! --[if lt IE9]&gt; &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;! [endif]--&gt; 国内のgoogleサーバーアクセスカードの関係で、国内のcdnを

    2022-02-01 01:07:30
  • HTML5新フォームコントロールとフォームプロパティのサンプルコード詳細

    最初の知識ポイント:フォームプロパティと概要 第二の知識:H5の新しいフォームコントロールとプロパティ、および要約 1つ目のナレッジポイント よく見かけるフォームバリデーションにはどのようなものがあるか   テキスト テキストボックスのラベル   パスワードパスワードボックス   チェックボックス マルチセレクトボックス   ラジオ ラジオボック

    2022-01-31 23:30:43
  • data:画像データのurlファイルをBlobアップロードバックエンドメソッドに渡す。

    キャンバスから取得した画像や、WeChat開発用SDKからdata:img形式で返された画像など、サーバーにアップロードする必要がある場合、変換が必要なシナリオがあります。 dataURLをBlobに変換する // base64 to blob dataURItoBlob(dataURI) { // convert base64/URLEncoded data component

    2022-01-31 23:19:44
  • Canvasでプログレスバー付きの非閉鎖円を描画する

    最終結果 I. 変数の定義 半径の定義、円の太さの定義、円の中心の定義、デフォルトの塗りつぶし色の定義 let radius = 75 let thickness= 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById(

    2022-01-31 22:18:19
  • Html5 スクロールする方法

    イシューコンテキスト サイトをモバイルに対応させる必要があり、モバイルH5とWebの両方で使用されているフレックスレイアウトソリューションはbluma H5で使用されているリストは、テーブルを描画するためにreact-virtualizedが使用されている テーブル内の1行のデータについて特定の詳細を表示するには、新しいページまたはポップアップウィンドウを使用して行うの

    2022-01-31 20:33:09
  • キャンバスラバーバンド線引き塗布方法

    ラバーバンディングとはどういう意味ですか? 描画を輪ゴムのように引き伸ばすことを指します。 例は以下の通りです:point_down。 アイデア アイデアは非常にシンプルで、輪ゴムの描画機能だけ注目すべき、以下はマウスダウン、マウスムーブ、マウスアップの3段階のアイデアをまとめたものです。 mousedown:開始位置の記録、ドラッグ(ドラッ

    2022-01-31 19:55:58
  • キャンバス画像分割効果の実装

    cssdesignawardsを見ていたら、画像の中身を分割するエフェクト(URL https://weareludwig.com をクリックすると、その中を見ることができ、とてもクールな感じがするので、自分でも実装してみましたが、なかなかうまくいきました。エフェクトを見る https://codepen.io/geeknoble/pen/OQaOVG 分析 ま

    2022-01-31 17:22:10
  • キャンバスの描画は、contain または cover モードで適応され、中央に配置されます。

    キャンバス描画のdrawImageは、異なる画像サイズとスケールを必要とするので、html+cssのレイアウトと同様に、異なるニーズに合わせてcontain and coverする必要があります。 含む 画像の長辺が完全に表示されるように、アスペクト比を維持したまま拡大縮小します。つまり、画像の全体が表示できるようにします。 コンテインモードで画像を固定ボックスの矩形内に配

    2022-01-31 17:01:34
  • Canvasシリーズのフィルター効果

    キャンバスは本当にすごいもので、あらゆるグラフィックやテキスト、ビットマップを描けるだけでなく、ビットマップに対して複雑なピクセル操作や加工をすることができます。ですから、フィルタのようなことも、実はCanvasで可能なのです。次は、その魔法を見る番です。 まず、以下のようなCanvasコンテナを用意する必要があります。 &lt;canvas id="myCanvas" width=

    2022-01-31 16:41:04
  • html5 目覚ましアプリミニノート

    最近、アプリから共有されるH5ページには、すぐに開けるボタンが必要で、ローカルにアプリがインストールされている場合は、直接ローカルアプリを起こし、インストールされていない場合はダウンロードに飛ぶという要件に出くわしました。これはごく普通のアクセス促進・誘導戦略です。フロントエンドのガジェッターはこんなこと初めてで、鼻歌交じりにドヤ顔でGoogleの旅に出なければならないのです。 探査の旅の

    2022-01-31 16:37:20
  • Html5ベースの音声検索機能

    注意深い友人は、Google検索が右側に音声認識を可能にする音声検索機能を備えていることを観察するかもしれない。これは完璧ではないかもしれないが、トレンドであることは間違いない。 #include&lt;stdio.h&gt; #define mod 1000000007; __int64 Quick_Mod(__int64 a,__int64 b)//quick power mod a

    2022-01-31 16:34:28
  • HTML5ページの長押しで画像を保存する機能を解決するための記事

    この記事では、H5で画像を保存するための長押しを実装する方法について詳しく説明します。 画像保存の長押しはH5では非常によくある要件ですが、jsにはその機能がないので、androidやiosのネイティブ機能を使うか、canvasで自分で描くか(スクリーンショット)ですが、ネイティブに比べると高価すぎてアプリに頼らなければならず、広く流通しクロスプラットフォームであるH5には向いていないので

    2022-01-31 12:59:42
  • H5では、ダイナミックなグラフィックス機能を実現するために、キャンバスの最も強力なインタフェース

    前回の記事では、canvasを使ってグラフィックを描く方法を紹介しましたが、描いたグラフィックは静的なものでした。 アニメーションとは? アニメーションを描く前に、アニメーションとは何か、アニメーションに最低限必要な基本的な条件は何か、考えてみる必要があるのではないでしょうか。 ツールで実演できるアニメーションとは? PPTで描かれたアニメーション効果です

    2022-01-31 12:40:03
  • iphoneXの前髪スクリーンに合わせたHtml5の簡易実装

    iphonex前髪画面は格好良い言及しないが、それは開発にいくつかの問題を引き起こし、いくつかのPMは、製品がフルスクリーンで表示することができますので、クライアントがフロントエンド処理のための前髪の上のスペースを解放することを願って、その結果、問題がページの頭が上部に固定されているときに、あなたがページを上下にスライドすると、大きなギャップを持っているでしょう、背景が層のように、障害で、それ以

    2022-01-31 10:40:40
  • HTML5で実現する写真・カメラ機能

    &lt;スパン オープニング クロームアプリのクラウドカメラアプリを制作しています。写真撮影、動画撮影、写真保存、ファイルアップロードなど、コアとなる機能を含んでいます。メディアストリーミングに関連する多くのHTML5 APIを含んでおり、この記事を書く目的は、知識を要約して整理すること、そして最も重要なことは、関連するニーズを持つ読者に何らかの指針を提供することです。 注:

    2022-01-31 10:31:31