• 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コンテナを用意する必要があります。 <canvas id="myCanvas" width=

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

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

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

    注意深い友人は、Google検索が右側に音声認識を可能にする音声検索機能を備えていることを観察するかもしれない。これは完璧ではないかもしれないが、トレンドであることは間違いない。 #include<stdio.h> #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で実現する写真・カメラ機能

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

    2022-01-31 10:31:31
  • N種類のキャンバスエクスポートイメージのクロスドメインポーズサマリーのロックを解除する

    この記事では、ドメインをまたいだキャンバス書き出し画像のロックを解除するためのN個のポジションを、以下のように共有してまとめています。 <ブロッククオート Uncaught DOMException: HTMLCanvasElement' で 'toDataURL' の実行に失敗しました。汚染されたキャンバスはエクスポートされない可能性があります。 上記のエラーは、セキュ

    2022-01-31 09:21:17
  • h5 web透かしSDKの実装コード例

    Webサイトの閲覧において、ユーザーがスクリーンショットを撮ったり、出所を追跡した上で機密情報が露出する画面を録画することを防ぐために、Web透かしが必要になることがよくあります。例えば、ネイルソフトをよく利用しますが、チャットの背景には自分の名前が表示されます。では、どのようにWeb透かし効果を実装するのでしょうか。 ウェブ電子透かしSDK、実装のアイデア 1. 名前、ニッ

    2022-01-31 09:15:53
  • 左右の高さの差がありすぎる問題を解決するための小型プログラムウォーターフォール

    滝のようなレイアウト効果を実現し、左から右へ順番に表示したい場合、cssレイアウトでは当面の間、ニーズを満たせません。Little Red Bookのウォーターフォール効果は、左列と右列に分かれており、奇数、偶数に応じて表示することが可能です。 <view class="waterfall"> <view class="waterfall-left">

    2022-01-31 09:06:02
  • IOSキーボードがfocusoutイベントでしまわれたときに元の場所に戻らない問題を解決する

    問題の症状 本日、モバイルH5ページを開発中、IOSでキーボードをしまった時にインターフェイスが元の位置に戻らないという問題に遭遇しました。その問題と症状について、以下に詳しく説明します。 ページ構成 当該ページは、フォーム構造になっています。つまり、divの下に4つの入力フォームがあり、ユーザーが郵送情報を記入するようなものです。のようなものです。 &l

    2022-01-31 08:20:52
  • ページ上部へのスムーズなスクロールを実現する3つの方法

    背景 最近、会社の公開用H5を開発したのですが、アイコンをクリックすると一番上にスクロールする機能を作りました。機能の実装は比較的簡単で、直接window.scrollTo(0, 0)を呼び出す、1行のコードで完了します。しかし、街獅子である自分には、そんな低い要件ではどうにもならないので、ページをスムーズに上部にスクロールさせる機能を実現することを自分への要件に加えました。調べた

    2022-01-31 07:21:37
  • キャンバスを使った線形・放射状グラデーションの使用例

    fillStyleの2つ目の使用例は、グラデーションカラーで塗りつぶすことです。グラデーションカラーは、線形グラデーションと放射状グラデーションに分けられる。 線形グラデーション:おおよそ2段階 ここで再び、canvasの2つの新機能が使用されます。 ステップ 1 : 新関数 createLinearGradient( xstart,ystart,xend,yend ) を使用します

    2022-01-31 06:29:40
  • Canvasユーティリティライブラリ Fabric.jsマニュアル

    はじめにFabric.jsとは? Fabric.jsは、Canvasアプリケーションの作成を容易にするためのライブラリです。Fabric.js は、不足しているオブジェクトモデル、svg パーサー、インタラクション、その他 Canvas に不可欠なツール一式を提供します。Fabric.jsは海外のフレームワークで、公式APIが雑多で充実しておらず、ドキュメントもほとんどが英語で、数

    2022-01-31 05:37:29
  • Canvasを使用したHD画面での描画がにじむ問題とその解決方法について

    HD画面が登場する以前は、画面上の物理的なピクセルがcssで定義された論理的なピクセルでした(当時は物理ピクセルと論理ピクセルという概念はなかったのでしょう)。つまり、以下のコードを使用すると、600x386のCanvasをブラウザに表示することができるのです。 // x.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include "time

    2022-01-31 05:23:23
  • ダブルキャッシュを使用したCanvas clearRectによるスプラッシュスクリーンの問題を解決しました。

    前置き 今日、H5でcanvasを使った作業をしていて、スプラッシュスクリーンの問題に遭遇しました。チカチカするのは以下のような感じです。 イシュー・ブリーフ 機能プロファイル H5 この部分の機能は、副次的なメニューをクリックすることで、画像のマスクを切り替えたり、背景を変更したりすることです。 機能がシンプルなため、この機能の実装には

    2022-01-31 04:54:45