ホーム>Web デザインのチュートリアル> HTMLチュートリアル
すべて Dreamweaver チュートリアル JavaScript チュートリアル HTMLチュートリアル CSS チュートリアル ヒントとコツ DHTML チュートリアル ウェブ特殊効果 WEB標準化
HTMLチュートリアル
  • キャンバス学習ノート: 単純なパスの描画

    キャンバス学習ノート: 単純なパスの描画

    1 線分 (直線パス) 線分を描画するための一般的な手順: moveTo(x,y) 指定した座標点 (x,y) にブラシを移動します lineTo(x,y) 直線を使用して現在の端点を接続しますおよび指定された座標点 (x,y) のストローク() は、現在の線描画スタイル 2 に従って現在または既存のパスを描画します。 2 長方形のパス描画
    2025-01-28
  • 同じドメイン名の下にない画像リソースによって引き起こされるキャンバスのクロスドメイン汚染の解決策

    同じドメイン名の下にない画像リソースによって引き起こされるキャンバスのクロスドメイン汚染の解決策

    背景画像と動的に生成された QR コードを含む画像を描画したいと考えています。背景画像はプロジェクト自体の静的なリソースであり、QR コードはサーバーによって動的に生成されるという前提があります。同じドメイン名ではありません。解決策: すべての画像を同じドメイン名にリダイレクトします: let count = 0; let bgImg = do
    2025-01-28
  • HTML5 における画像の放物線運動に関するいくつかの考えについての簡単な説明

    HTML5 における画像の放物線運動に関するいくつかの考えについての簡単な説明

    オブジェクトや画像が放物線、より正確にはベジェ曲線に沿って移動するのは一般的であり、これは H5 開発における一般的な要件であるため、設計草案に基づいて移動経路をいかに迅速に計算するかが開発者にとっての最初の課題となります。 H5 開発で一般的に使用される設計ドラフトのサイズは 640 * 1008 であるため、このサイズに基づく解決策のアイデアは次のとおりです。
    2025-01-28
  • 要素画像のミラー反転アニメーション効果をキャンバスに実装する方法

    要素画像のミラー反転アニメーション効果をキャンバスに実装する方法

    1. ここをクリックして、キャンバス画像の水平ミラー反転効果をプレビューできます。キャンバス画像の水平ミラー反転アニメーションのデモ ページで画像をクリックすると、アニメーション効果が表示されます。 2. Canvas 上での画像ミラー反転の実装。たとえば、CSS で要素の反転効果を実現するには、特定の画像を反転する必要があります。
    2025-01-28
  • html5階層化画面適応方式

    html5階層化画面適応方式

    デザインは素晴らしいです。今回は実際に設計草案に基づいています。なぜなら、今ではどのマシンも設計草案によれば標準的なマシンだからです。 開発者のクラスメートの皆さん、設計草案の注釈を直接読むことができるようになりました。画面適応 画面適応とは、コンテンツ適応領域と画面間隔の間の適応関係を指す必要があります。シングルスクリーンアダプテーションには、含む、カバーまたはフィル、マルチスクリーンアダプテーションが含まれます。
    2025-01-28
  • さまざまな iOS デバイスでの h5 ページの問題概要の詳細な説明

    さまざまな iOS デバイスでの h5 ページの問題概要の詳細な説明

    最近、記事のコメント機能であるミニプログラムの Web ビューに埋め込まれた h5 ページを作成していましたが、その過程で多くの互換性の問題に遭遇し、異なるモデルでのパフォーマンスも非常に不安定だったので、以下の問題をまとめました。 : 後で確認できるように記録します。 1. 日付の問題は yyyy-mm-dd hh:mm:ss です。
    2025-01-28
  • html5アプリ共有機能呼び出し例(WebViewJavascriptBridge)

    html5アプリ共有機能呼び出し例(WebViewJavascriptBridge)

    編集者は、h5 モバイル アクティビティ ページを作成し、ページ コンテンツをクリックして iOS と Android を取得し、ユーザーが記録していない共有機能 (WeChat、WeChat Moments、QQ、QQ Space などを含む) を開発するというリーダーシップ タスクを受け取りました。ログイン後にのみ共有できます。共有が成功すると、クーポン機能の付与リクエストを開始できます。以下は参考のために得られた経験です。
    2025-01-27
  • WeChatミニプログラム「サンタハット」の実装アイデアを詳しく解説

    WeChatミニプログラム「サンタハット」の実装アイデアを詳しく解説

    この2日間で、友人たちの周りにはサンタ帽があふれ、この小さなプログラムに関する噂を反論する人も出てきた。製品の観点から見ると、これは間違いなく非常に成功していますが、技術的な観点から見ると、それは確かに当たり前のことであり、創造性が非常に重要です。アイデアについて簡単に説明します。アバターを取得し、Canvas でアバターを描画し、Canvas で帽子を描画し、調整します。
    2025-01-27
  • シンプルなキャンバス迷路ゲームを素早く実装する例

    シンプルなキャンバス迷路ゲームを素早く実装する例

    まえがき (最近、デザインパターンに少し夢中になっていて、ずっと純粋な JS と向き合うのは少し退屈です -_-。そこで、気分を盛り上げるために面白いことを書きました) さて、canvas は新しいものではありませんが、日常業務ではあまり使われないので、今日は簡単なキャンバス迷路の実装方法を紹介します。この例は「html」からのものです。
    2025-01-27
  • HTML5 キャンバスでテキストを自動的に折り返すサンプルコード

    HTML5 キャンバスでテキストを自動的に折り返すサンプルコード

    この記事では、キャンバス描画プロセス中のdrawTextの行折り返し問題を解決する方法を紹介します。まず、キャンバス上にテキストを描画するときに誰もが遭遇する問題を見てみましょう。150*​​100のキャンバスに境界線を追加して境界線を明確にします。
    2025-01-27
  • html5 と APP の混合開発で遭遇する問題の概要に関する簡単な説明

    html5 と APP の混合開発で遭遇する問題の概要に関する簡単な説明

    背景: 社内でネイティブ APP と h5 の混合開発プロジェクトに参加しました。私はプロジェクトの h5 部分を担当しました。具体的な問題 問題 1: ページ スクロール バー。問題 問題の説明 Web ページは PC ブラウザーにあります。インターネットでの閲覧時にはスクロール バーがありますが、モバイル ブラウザーを開いた場合には、スクロール バーの解決策がありません。
    2025-01-27
  • Canvas は高次ベジェ曲線 (N 次ベジェ曲線ジェネレーター) を実装します。

    Canvas は高次ベジェ曲線 (N 次ベジェ曲線ジェネレーター) を実装します。

    最初に書きました ネイティブ Canvas は 3 次ベジェ曲線までしかサポートしていないため、複数のコントロール ポイントを追加したい場合はどうすればよいですか? (最も複雑な曲線でも、3 次ベジェを使用してシミュレーションできます。)同時に、ベジェ制御点の位置を直感的にどの程度設定して曲線を形成できるかを明確に理解することは困難です。欲しいですか?精神的に
    2025-01-27
  • html5.2ダイアログの詳細な紹介

    html5.2ダイアログの詳細な紹介

    2017 年 12 月 24 日に、HTML5.2 標準が固まりました。これは、モバイル端末が HTML5.3 の計画段階に入ったことを意味します。HTML5.2 は固まりましたが、いくつかの新しい内部仕様はまだモバイル ブラウザでサポートされていません。ここでは、標準に新たに含まれる一般的に使用されるラベルを見てみましょう。
    2025-01-27
  • Canvasの手書き署名を利用してhtml5に保存する実装方法

    Canvasの手書き署名を利用してhtml5に保存する実装方法

    最近同社は、次のようにキャンバスの線描画機能とモバイルのタッチイベント js 部分を組み合わせた署名機能に取り組んでいます。 window.onload = function() { new lineCanvas({ el: document.
    2025-01-27
  • HTML5 における記事とセクションの違いの詳細な分析

    HTML5 における記事とセクションの違いの詳細な分析

    コンテンツ ブロックとは、HTML ページを論理的に分割する単位を指します。ページ型 Web サイトの場合、ナビゲーション メニュー、記事本文、記事コメントなどの各部分をコンテンツ ブロックと呼ぶことができます。 Article 要素は、外部から独立して参照できる、ドキュメント、ページ、またはアプリケーション内の独立した完全なコンテンツを表します。それは可能です
    2025-01-27