• 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
  • キャンバスアプレットでテキストのアンカーポイントを中央に設定する

     アバターは、リクエストとダウンロードのリストにTencentドメイン名を追加するだけでよく、それには wx.getImageInfo() ローカルにキャッシュすることができ、成功したコールバックをキャンバス内に追加して画像を生成します。 テキストをある位置で中央に配置したい場合、テキストの長さに応じて、canvasでテキストの中央にアンカーポイントを実現するにはどうすればよ

    2022-01-31 01:07:29
  • Webページでよく使われるコード より基本的なもの

    <テーブル <スパン お気に入りに追加 説明 クリックすると、ブラウザのお気に入りメニューに登録されます。 コード <span style="CURSOR: hand" onClick="window.external.addFavorite('https://www.jb51.net','Script House')" t

    2022-01-30 23:46:46
  • テキストを左右にずらす効果のあるHTMLコード

    <div align="center"> <table style="color:white; font-size:10pt" border="1" style="color:white; font-size:10pt" bordercolor=& quot;#FF9900"> <td background="graphic-file-url.gif"

    2022-01-30 23:36:48
  • 閲覧中のページがBaiduのスナップショットを保存しないように設定する方法

    今日、Baiduでページを検索するとき、ページが削除されたので、Baiduのスナップショットを使用するのは当然ですが、Baiduのスナップショットを開くと、それが表示されます。申し訳ありませんが、あなたが閲覧しているページは、Baiduのスナップショットを保存することはできませんので、私はBaiduのスナップショットのキャッシュを無効にする方法を設定する方法を書き留めると思った、メソッドは次のとお

    2022-01-30 22:54:54
  • Webのフロントエンドでよくある攻撃とその防止方法

    フロントエンドのWeb開発で遭遇するセキュリティは、クライアントブラウザで実行されるコードがサーバ側でセキュリティリスクを引き起こすことはないと考える人が多いため、見落としがちですが、この記事ではフロントエンドのWeb開発でよく遭遇するセキュリティ問題とその対策について簡単に説明します。 フロントエンド技術の発展により、セキュリティ問題はサーバーから各ユーザーの前に静かに現れ、ユーザーデー

    2022-01-30 22:51:06
  • ハイパーコネクティビティの4つの状態の応用を詳しく解説

    原因はブラウザの問題だと思われるかもしれませんが、スタイル定義の順番が間違っている可能性が高いです。異なる状態でも接続スタイルを確認できるようにするため、正しいスタイルの順序は次のようになります。 " link - visited - hover - active " または " LVHA " (省略)。 コアコンテンツです。 各セレクタには、"specificity"がありま

    2022-01-30 22:16:06
  • Web制作マスターのためのよく使われるHTMLタグの解説

    I. 一般的なHTMLタグの最適化 HTMLについては、Web編集者の基本スキルであるはずで、使いこなせていないとは言い切れない。Web編集者として、すべてのSEOパラメータをマスターする必要はありませんが、基本的なHTMLタグの中のSEOに関するものを理解することは、誰にとっても必要なことです。 <テーブル <html> <head>

    2022-01-30 21:41:31
  • フレームリフレッシュメソッド この方法が便利です

    iframeの更新方法 1. javascript の document.fr.location.reload() で更新が可能です。 2. document.fr.location.href を変更することで更新することもできます。 例えば、こんな感じです。 コピーコード コードは以下の通りです。 <iframe name="fr" width="96%"

    2022-01-30 20:55:07
  • iframeに関するちょっとした発見と反省

    今日は思いがけない発見から始まります。この会社には、いくつかのホームページがあります。お互いの間にフレンドリンクを貼るためのリンクがある。ただ、チェックするためにリンクを変更し、ウェブマスターツールを使ってテストしたところ、実際に自分のものがないことが判明しました フレンドリンクをfooter.hmtlに入れたことが判明したのです。その後、ホームページで埋め込まれたiframeを介して。だから検出

    2022-01-30 20:21:04