html5 - BinaryDevelop

キャンバスで簡単なポスターを描くお手本

この製品は、ユーザーが私たちのアプリ内でWeChatやQQなどに画像を共有することを望んでいます。画像には、ユーザーの名前、アバター、およびユーザーの情報が記載されたQRコードが含まれています。製品はこのポスターを生成することができるようになります。まず、うちのボスがhtml2canvasというプラグインがあると教えてくれたのですが、その役割はdomノードを画像に変換することです。実験して

2022-02-01 19:09:58
canvasで心電図を描画するサンプルコード

この記事では、canvasで心電図を描画するサンプルコードを以下のように共有で記述します。レンダリング感想です。 1.ポイントを模倣する（実データがある場合、つまりデータをキャンバスに対応する座標ポイントにファントムする）。ポイントをシミュレートする際の注意点は、高い部分は左右対称に、上下はランダムに表示させると見栄えが良くなります 2. 線の描画

2022-02-01 19:03:16
モバイルでiframeを拡大縮小するサンプルコード

仕事で奇妙な問題に遭遇し、一日中翻弄された挙句、ようやく解決したので、その解析と解決策を紹介します。レスポンシブな企業サイトを作るプロジェクトで、事前に静的なグラフのページをカットして、テンプレートとしてバックエンドに提出するのですが、私も基本的にこのプロジェクトを辞めました。バックエンドに着地すると、モバイル側でページがうまく表示されず、ぼやけているように見えることがわかりまし

2022-02-01 17:21:11
モバイルhtml5で長押しイベントをシミュレートする方法

なぜこの記事を書いたのか先日、ホバー削除ボタンの削除を表示するタグを長押ししたいという要望がありました。この要件は実はアプリでは非常によくあることなのですが、モバイルのh5では長押しイベントがないので、このイベントを自分でシミュレートする必要があるのです。おおよその効果は以下の通りです。追記：gifを作るのにアプリをダウンロードして、パソコンにメールで送る必要があ

2022-02-01 17:05:05
キャンバス画像getImageData,toDataURLのクロスドメイン問題の解決方法を説明する。

まず、画像サーバーにAccess-Control-Allow-Originを設定します。例えば、Tencentはgtimg.com、Baiduはbdimg.com、あるいはTencent CloudやAli Cloudのサービスを利用するチームも多いようです。メインページは別ドメインにあることが多く、キャンバス画像に対して getImageData() や toDataU

2022-02-01 16:50:05
html5 canvas 自動改行でテキストを描画するサンプルコード

この記事では、キャンバス描画時のdrawTextの改行問題を解決する方法を紹介します。まず、キャンバスのテキスト描画で通常遭遇する問題を見てみましょう。 150×100のキャンバスで、境界がわかるようにボーダーがあります。 <canvas id="canvas" style="border:solid 1px darkgoldenrod;" width="200px" heig

2022-02-01 16:19:35
html5 canvasによる画像圧縮のサンプルコード

私は画像のbase64が大きすぎる場合、要求は非常に遅く、深刻な直接タイムアウトになることがわかったので、私はアップロードする前に画像を圧縮することを考え、その後大幅に効率を改善することができますバックグラウンドにアップロードし、ここでいくつかのピットを記録するキャンバス圧縮画像を使用して発生しました。完全なコードは、この記事の最後に与えられます。最初の落とし穴は、圧縮する際に画像自体の

2022-02-01 16:13:52
Html5キャンバスパーティクルクロックサンプルコード

次のように、パーティクルクロックの効果を見てみましょう。ここでは、canvas と js を使って実装します。まず、以下のようにhtmlファイルを作成し、canvasキャンバスを追加します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

2022-02-01 13:55:21
ページ下部のHTML5フッターの詳細（CSS＋JS）

HTML5でページ下部にフッターを配置する方法（CSS+JS）を説明し、以下のように共有します。 JavaScriptを使用します。 <script type="text/javascript"> $(function(){ function footerPosition(){ $("footer").removeClass

2022-02-01 13:40:03
Canvas がクロスドメイン画像を導入し、toDataURL() エラーが発生する。

この記事では、Canvasがクロスドメイン画像を導入するとtoDataURL()エラーが発生する問題の解決策を説明し、以下のように共有します。 [シーン】です。］ユーザーがWebページを開き、Tencent COS（画像サーバー）に画像を要求する。キャンバスを使って描画する。その後、ユーザーは画像を再選択し、トリミングして、アップロードすることができます。 [

2022-02-01 13:31:48
モバイルウェブの画像プリロード方式について簡単に紹介します。

会社の業務上の必要性から、vueで作ったWebページはスマートホームのwifiに接続する必要がありますが、このwifiはインターネットには接続されておらず、あくまで携帯電話と家庭とのインターフェースとして使用されています。このため、この無線LANの下では、Webページがサーバーから画像を読み込むことができませんでした。この点、vueのシングルページシステムでは、3つの選択肢を思いつきまし

2022-02-01 13:29:38
localStorageの有効期限を設定する詳細な方法

localStorageは積極的に削除されることはなく、破棄されることもないことは周知の事実です。では、localStorageの有効期限はどのように設定するのでしょうか？ <script type="text/javascript"> // Wrap the expiration control code function set(key,value){

2022-02-01 13:28:58
html5のfigureとfigcaptionの使い方

figureタグとfigcaptionタグは、html5で追加された新しいセマンティックタグです。 html5のセマンティックタグであるfigureタグ。単体のストリームコンテンツ（画像、図表、写真、コードなど）を指定するために使用します。 figcaption タグ、html5 のセマンティックタグです。 figure と共に使用し、定義の figure 要素

2022-02-01 12:44:52
HTML5動画再生(動画),JavaScript制御動画サンプルコード

具体的なコードは以下のとおりです。 <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> figcaption { text-align: center; line-height: 150px; font-family:

2022-02-01 12:30:12
HTML5 における dialog 要素のテイスト

ダイアログ（また、モーダルボックス、フローティング層として知られている）ユーザーとの対話のためのWebプロジェクトの重要な部分である、我々は最も一般的にアラート（）、jsで（）を確認しますが、このダイアログが美しくないとカスタマイズすることはできませんので、開発の過程で、一般的にホイールを構築したり、サードパーティを使用して、自分のニーズによると、。ダイアログボックスの構成一

2022-02-01 12:04:17
HTML5 動画再生プラグイン video.js のご紹介

video.jsは、非常に人気のあるhtml5ビデオプラグインです。それは携帯電話でビデオを再生するために非常に適している（例えば、WeChatのWebページ）、強力で、フラッシュへのダウングレードをサポートしています、ie8と互換性があります。 http://videojs.com/     git&demo : http://files.cn

2022-02-01 09:50:56
キャンバスで画像を圧縮し、カードを作成する例

イベントページなどをやっていると、画像をアップロードする必要があったり、生成したテキストとステッカーでカードを生成して、ユーザーが長押しして保存する必要があったりすることがよくあります。この要件は以前にも一度ありましたが、最近またそれに出会い、canvasを使って実現しました。単純にブログのアウトを整理するもし、もっと良い実装方法があれば、一緒に議論してください。 canvasで画像

2022-02-01 09:33:57
キャンバスサーチライトエフェクトのサンプルコード

canvas の clip() メソッドは、元の canvas から任意の形状や大きさを切り取るために使用されます。いったん領域が切り取られると、それ以降の描画はすべて切り取られた領域に制限されます (キャンバスの他の領域にはアクセスできません)。また、clip() メソッドを使用する前に save() メソッドを使用して現在のキャンバス領域を保存し、後で restore() メソッドを

2022-02-01 09:20:51
HTML5 postMessage使用マニュアル

コーディングをしていると、次のようなクロスドメインのシナリオに遭遇することがよくあります。 1、ページ内にiframeをネストさせ、iframeのメッセージングを行う。 2、ページ間、複数ページ間のメッセージの受け渡しこれらの頭痛の種であるクロスドメインの問題に対して、html5は特別に新しい機能であるpostMessage（クロスドキュメントメッセージング）を導入しました。

2022-02-01 07:04:50
HTML5サインイン機能

紹介 H5のユーザーサインインの例（css+jquery、画像なし）ネットで見つけたユーザーサインインの例は、画像が多かったり冗長なコードで構成されていたりで、あまり良くないので、あえてサインインのインターフェース（モバイル）を作りました。 h5を使用し、css + jquery + htmlのみで構成されたモバイル用ユーザーサインサンプルページです。デモ htt

2022-02-01 06:41:15

最新

おすすめ