html5 - BinaryDevelop

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
HTML5でWeb Notificationのデスクトップ通知を実装する方法

時々、デスクトップの右下に以下のようなプロンプトが表示されます。このデスクトップアラートは、HTML5に追加された新しいWeb Push Notificationの技術です。 Web Notifications技術は、ページがページの外にシステムレベルで表示される通知を送信することを可能にします。新着メールのアラート、オンラインチャットで受信したメッセージのアラートなど、ユ

2022-01-31 04:18:39
透明度を変更するためのキャンバスピクセル処理コード

I 定義と使用法 getImageData()メソッドは、キャンバスの指定された矩形領域のピクセルデータをコピーしたImageDataオブジェクトを返します。注：ImageDataオブジェクトは画像ではありません。キャンバスの一部（矩形）を指定し、その矩形内の各ピクセルに関する情報を保持します。 ImageDataオブジェクトの各ピクセルには、RGBA値という4つの側

2022-01-31 04:06:23
canvas 学習のまとめ III - パスの描画 - ラインセグメント

Canvasの描画環境には、即時描画方式のものと、パスを使った描画方式があります。即時描画メソッドはstrokeRect(), fillRect()の2つだけで、strokezText(), fillText()も即時描画メソッドですが、テキストは描画とみなされません。パスベースの描画方式 SVG（Scalable Verctor Graphics）、Adobe Ill

2022-01-31 03:57:53
window.openがブラウザにブロックされている場合の解決策を詳しく説明します。

現象プロジェクトは、最近window.openの使用は、人々は信じられないほどああ、自分の環境では、ページ上に解放することができますが、ユーザーのために、あなたはブロックに合格しているユーザーに求めることはできません落ち込んでいるブラウザによってブロックされた発生しました。また、インターセプトがある場合、多くの白人は、単に悲しいああ〜〜〜、インターセプトされたページで見るためにど

2022-01-31 03:51:58
キャンバスに丸みを帯びたアバターを描く方法

丸みを帯びたアバターのキャンバス画像を含むウェブページを描きたいが、アバター自体は正方形である場合、必要な方法は以下の通りです。まず、キャンバス上のアバターの座標と幅と高さを取得します。(取得方法はここでは割愛します) let {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80}; そして、次のような関数を呼び出すだ

2022-01-31 03:43:45
異なるiosデバイスでのh5ページの詳細問題点まとめ

最近アプレットウェブビューに埋め込まれたh5のページを書いて、記事のコメント機能、プロセスは、互換性の問題の多くが発生し、異なるモデル上のパフォーマンスも非常に矛盾しているので、次の問題をまとめ、将来の視聴のために記録されます。 1. 日付の問題 yyyy-mm-dd hh:mm:ss のフォーマットはiosでは認識されません。ブラウザ側では問題なく処理されますが、モバイ

2022-01-31 03:19:18
画像リソースが同一ドメイン下にないために、キャンバスがクロスドメインで汚染される場合の解決策

背景画像と動的に生成されるQRコードを含む画像を描きたい。ただし、背景画像はプロジェクト自体の静的リソースで、QRコードはサーバーによって動的に生成され、両者は同じドメイン下にないことが条件となる。回避策：同じドメイン名の下にあるすべての画像をリダイレクトします。 let count = 0; let bgImg = document.createElement('img'); l

2022-01-31 03:10:45
カスタムお絵かきボード用JavaScript+Canvasサンプルコード

最近、HTML5の新しい要素プロパティをいくつか調査したところ、特に新しいタグ要素Canvasがとても便利であることがわかりました。正式には、Canvas API（キャンバス）は HTML5 の新しいタグで、ウェブページにリアルタイムで画像を生成し、画像コンテンツを操作することができます。以下では、JavaScriptとCanvasを組み合わせて、Canvasの機能を実装しています。効果

2022-01-31 02:56:43
モバイル版Html5におけるBaidu地図のクリックイベント

百度地図の公式説明によると、モバイルH5ページで聴くことができるのは以下の4つのイベントです。タッチスタート、タッチムーブ、タッチチェンド、ロングプレスまた、マップがクリックイベントをリッスンしても、そのイベント内のコードはモバイル側では実行されません。地図のtouchendイベントをリッスンして、地図をドラッグするとtouchend内のコードも実行される、という

2022-01-31 01:53:39
IphoneXなどのHtml5モバイル化

iPhone Xのモデルがどのようなものかを見てみましょう。上の画像では、Iphonex モデルにはヘッダーとボトムにこれら 2 つの新しい領域があります。したがって、私たちの Web アプリの表示を容易にするために、このモデルに適合させる必要があります h5で作られたモバイルページのレイアウトは、head+torso+bottomの3カラムモードが一般的で、headとtop

2022-01-31 01:40:01
キャンバスでの複数描画の順番の説明

開発において、canvasを使って複数の絵を同時に描く必要がある場合、絵のサイズが異なるため、配列の前にある絵を先に読み込んでから描くと、描いた絵の順番が期待通りにならないことがあります（特にクロスドメイン・リダイレクトの絵のため）、私の解決策は：最初に全部描いてから並べ替えて私の解決策は、全部描いてから、目的のノードに追記する前に並び替えることです。 <div id="myCon

2022-01-31 01:21:32

最新

おすすめ