• キャンバスでDVDスタンバイのアニメーションを作成するコード

    免責事項 キャンバスを教えるつもりはありません。ただ、簡単に見てみると面白いと思っただけです。 若干荒いということなので、スプレーはしないでください。 効果 若干のフレームレートの低下、もちろん現実にはもっとスムーズです。 HTMLの実装 <!DOCTYPE html> <head> <meta nam

    2022-02-07 09:56:18
  • html文字列の正規判定とマッチングの具体的な利用方法について

    前文 最近、html文字列を渡す必要があるコンポーネントを書いていて、htmlタグかどうか、タグ内のテキストと一致するかどうかなど、いろいろなルールを使って判断していました。以下はそのメモです。 入力される文字列が閉じたhtmlタグを含んでいるかどうかを判断する方法 /<\/? [a-z][\sS]*>/i これは実際にはタグ閉じの完全性や

    2022-02-07 06:42:14
  • 5分でわかるHTML5 WebSocketプロトコル

    1. 背景 プッシュ技術を実装するために多くのウェブサイトで使われている技術にAjaxポーリングがあります。ポーリングとは、一定時間ごとにブラウザからサーバにHTTPリクエストを行い、サーバからクライアントブラウザに最新データを返すというものです。この従来のモデルは、ブラウザがサーバーにリクエストを送り続ける必要があるという明らかな欠点があるが、HTTPリクエストには長いヘッダーが

    2022-02-06 21:21:46
  • もしかしたら、これらがあなたの欲しいH5ソフトキーボード対応ソリューションかもしれません(要約)。

    プリアンブル ここしばらくH5チャットのプロジェクトをやっていて、入力ボックスにフォーカスが当たる、ソフトキーボードがポップアップする、入力メソッドボックスにアタッチ(トッピング)することが要求される、という大穴を踏んでしまったんだ。この要件は非常に明確で、とてもシンプルに見えますが、そうではありません。いくつかのモデルで実験した結果、主な問題点は以下の通りでした。 And

    2022-02-06 18:28:36
  • ivxプラットフォーム開発:9箱の抽選機能をコードレスで実装する。

    プリアンブル 前回、私は0コード開発プラットフォームIVXについて何かを読んでいたと言った、いくつかの時間前に忙しい試験の後、最近9ギャラリー宝くじを達成するためにチュートリアル0コードに従って、ハハハ感じまだ非常に強力な、人々が知っているの少しを知る 可視化 このことは、我々は通常、データの可視化を達成するために、いくつかのパッケージやライブラリを使用します。とビジュアルプログラ

    2022-02-06 17:54:26
  • HTML5でよく使われるセマンティックタグの説明

    クイッククエリ 記事|脇|ナビ|セクション|ヘッダー|フッター 建築プレビュー nav ナビゲーションリンクを定義するセクション トップページ、サービス情報ページ、著作権情報ページなど、サイトのナビゲーションリンクをフッターに表示します。 <nav> <ul> <li><a href

    2022-02-06 17:24:26
  • ベッセル曲線の軌跡アニメーションのためのCanvasサンプルコード

    最近、以下のような効果を実装しましたので、ご紹介します。 例えば、次のような曲線をアニメーション化したいとします。 その都度、短い線を引いてつなぐと、次のように5分割されます。 <イグ あと10段落見てください セグメントの数が十分に多ければ、各セグメントは曲線のように見えるでしょう 二次ベッセル曲線 /** * S

    2022-02-06 16:31:45
  • モバイルドローイングブラー問題解決におけるキャンバスの深い理解

    モバイルとの互換性の問題から、あるプロジェクトでは、フロントエンドでpdfをモバイルページで直接表示できるようなインターフェイスに変換する必要があります。この解決策を容易にするために、pdf.js プラグインを使用し、ページ上で pdf をキャンバスに変換することができました。しかし、テストの過程で、それはモバイルブラウザでは、ディスプレイの内容が非常にぼやけていることが判明した(下図)、分析の

    2022-02-06 11:07:31
  • webViewでhtml画像を読み込む際の問題を解決する。

    いきなりxml形式のhtml文字列というパースインターフェースが現れても、慌てる必要はなく、普通にwebviewのloaddataメソッドに任せれば解決しますが、今日は画像文字列のセットについてです <img src="//yanxuan.nosdn.127.net/75c55a13fde5eb2bc2dd6813b4c565cc.jpg"> <img

    2022-02-06 09:36:16
  • HTML5ページシームレス点滅オープン問題と解決策

    従来のWeb最適化では、圧縮、解凍、ダイナミックローディングなどにより、最初の画面のリソースサイズを小さくすることができます。また、オフラインパッケージ、ページダイレクトアウトなどにより、htmlのリターンを高速化することができます。h5 second open bookの前回の記事で簡単な分析があります。ほとんどの場面で、これらのプログラムは十分であり、優れた結果を得ることができます。しかし、

    2022-02-06 07:28:12
  • HTML5 モバイルポップアップアニメーション効果

    アイデア 1. 個々のコンテンツを編集し、自身の幅を計算し、初期位置を決定する 2. 画面幅に距離を移動させる 3. 高さ、アニメーション移動時間、アニメーション遅延時間を乱数で制御するCSSアニメーション関数をjsで動的に追加する。 コード htmlスケルトン構造 (例として3つ、インターフェイスが長すぎて不親切だと感じる場合はjs動的生

    2022-02-06 05:34:57
  • HTMLでIMGをDIVコンテナのサイズに自動的に適応させる方法

    IMGを適応させるために、以下のように水平方向に適応させる例を作ってみた。 IMGスタイル(縦方向は自動サイズ合わせで横方向に引き伸ばす) DIVスタイル(要素が中央に配置される) IMGスタイル (水平方向に引き伸ばされ、垂直方向に自動的にサイズマッチングされます。) width:100%; height:auto; (縦方向に伸縮、横方向は自

    2022-02-06 02:57:05
  • html2 canvasで印刷用の鮮明な画像を生成

    最近、会社の業務上の必要性から、ワンクリックで写真画像の生成を完了し、全体像を印刷する必要があります html2canvasは非常に強力なスクリーンショットプラグインで、多くの画像生成や印刷の場面で利用されている しかし、結果はぼやけてしまうので、この記事では、ぼやけの問題を解決する方法と、さまざまなパラメータの設定方法を記録します 基本的な使い方 window.ht

    2022-02-06 01:39:56
  • Canvas wave garlandのサンプルコード

    JSでのCanvasアニメーション 数日ブログを書いていなかったし、今日は遅くまで忙しいので、ウェーブリースの作り方を伝授します <イグ 效果图如上所示为。 老矩先把代码给大家,新建一个文档(新建一个txt文本文档,把后缀改名为" .html)。 "),以记事本打开,把复制好的代码粘贴进去,并设计 ";,退出,双击或右键选择浏览器打开。

    2022-02-05 13:06:36
  • ビデオグリーンスクリーンキーイングのキャンバスピクセルポイントマニピュレーション

     今回は、ビデオグリーンスクリーンキーイングのキャンバスピクセルポイント操作について紹介し、以下のように共有します。 使用方法 context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight); <テーブル パラメータ 説明 imgData キャンバス上に戻すImage

    2022-02-01 22:31:33
  • キャンバス・クロスドメイン・デピットの実践の説明

    Canvasのクロスドメイン問題を解決するには?ここでは、Canvasで描画する際に発生したクロスドメインの問題と解決策を紹介します。 まず、実装を見てみましょう。 実装方法 ターゲット画像は、通常、画像+テキストで構成されます。奇妙な大きさの画像でも、予測不可能な種類のテキストでも、canvas api の drawImage と fillText メソッドを使用すること

    2022-02-01 22:01:30
  • html2canvas.jsを使用してページのスクリーンショットを撮影し、表示またはアップロードするサンプルコード

    先日、html2canvas.jsを使ってページのスクリーンショットを実装するプロジェクトを書いたのですが、いろいろと落とし穴があったので、メモ書きしておきます。 html2canvasを使用する際、ビジュアルインターフェイスしかキャプチャできない、スクリーンショットの背景色がない、svgタグがキャプチャできないなどの問題に遭遇することがあります。 I. html2canvas.

    2022-02-01 21:40:26
  • Html5 Canvasアニメーションの基本的な衝突検出の実装

    Canvasで衝突判定を行うには、ゲームエンジンを直接使うことが多いのですが( Cocos2d-JS は、その 白鷺 ) や物理エンジン ( ボックス2D 内蔵されている衝突判定機能の内部構造について、気になったことはありませんか?以下では、基本的な衝突検出の技術について説明します。 1. 矩形ベースの衝突検出 衝突判定とは、物体が重なっているかどうか

    2022-02-01 21:12:07
  • キャンバスの幅と高さの設定に関する問題点

    最近、HtmlのCanvasタグに手を入れる必要があり、勉強しました。 キャンバスは、HTML5で追加された新しいコンポーネントです。カーテンのようなもので、そこにJavaScriptでさまざまなグラフやアニメーションなどを描くことができる。 Canvasがない時代には、Flashプラグインでしか描画できず、ページはJavaScriptでFlashとやりとりする必要がありました。Ca

    2022-02-01 21:11:48
  • モバイル開発 HTML5 ボタンをクリックすると、ページがちらついたり、背景が黒くなったりする問題

    IOSでH5ページをテストする際、ボタンをクリックするとボタンがちらつき、黒い背景が表示され、ユーザーエクスペリエンスに影響があることがわかりました。最終的に、Dou Niangを通じて解決策を見つけました:それは、クリックされた要素にCSSプロパティまたはグローバルCSSを追加することです。 -webkit-tap-highlight-color:transparent; *{

    2022-02-01 20:40:21