BinaryDevelop

  • [CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード

    この記事の例はアプレットで書かれていますが、実現する機能には影響ありません。 wxml 画像の入ったボックスをもう一回コピーして、ループしている画像の最初と最後をつなげます。 <view class="scrollbox dis-flex"> <view class="imgItem dis-flex" style="animation: {{comp

    2022-02-02 02:29:45

  • 原理を説明するためにいくつかの方法の虫眼鏡効果の模倣で[css3]css3

    なぜ、記事のタイトルが「偽物の虫眼鏡」なのですか？ なぜなら、私が今日言おうとしていることは、一般的にそうであるように、大きな部分画像のポップアップの隣にマウスが移動したとき、それは書きやすく、あまり技術がない（親要素（または言う：元の画像）の相対位置決めと、大きな部分画像（目的：それは元の画像の隣の位置にあるように）の絶対位置決めと、CSSコントロールスタイルとマウスイベントリスナーの横に

    2022-02-02 02:04:35

  • ビデオグリーンスクリーンキーイングのキャンバスピクセルポイントマニピュレーション

     今回は、ビデオグリーンスクリーンキーイングのキャンバスピクセルポイント操作について紹介し、以下のように共有します。 使用方法 context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight); <テーブル パラメータ 説明 imgData キャンバス上に戻すImage

    2022-02-01 22:31:33

  • キャンバス・クロスドメイン・デピットの実践の説明

    Canvasのクロスドメイン問題を解決するには？ここでは、Canvasで描画する際に発生したクロスドメインの問題と解決策を紹介します。 まず、実装を見てみましょう。 実装方法 ターゲット画像は、通常、画像＋テキストで構成されます。奇妙な大きさの画像でも、予測不可能な種類のテキストでも、canvas api の drawImage と fillText メソッドを使用すること

    2022-02-01 22:01:30

  • html2canvas.jsを使用してページのスクリーンショットを撮影し、表示またはアップロードするサンプルコード

    先日、html2canvas.jsを使ってページのスクリーンショットを実装するプロジェクトを書いたのですが、いろいろと落とし穴があったので、メモ書きしておきます。 html2canvasを使用する際、ビジュアルインターフェイスしかキャプチャできない、スクリーンショットの背景色がない、svgタグがキャプチャできないなどの問題に遭遇することがあります。 I. html2canvas.

    2022-02-01 21:40:26

  • Html5 Canvasアニメーションの基本的な衝突検出の実装

    Canvasで衝突判定を行うには、ゲームエンジンを直接使うことが多いのですが( Cocos2d-JS は、その 白鷺 ) や物理エンジン ( ボックス2D 内蔵されている衝突判定機能の内部構造について、気になったことはありませんか？以下では、基本的な衝突検出の技術について説明します。 1. 矩形ベースの衝突検出 衝突判定とは、物体が重なっているかどうか

    2022-02-01 21:12:07

  • キャンバスの幅と高さの設定に関する問題点

    最近、HtmlのCanvasタグに手を入れる必要があり、勉強しました。 キャンバスは、HTML5で追加された新しいコンポーネントです。カーテンのようなもので、そこにJavaScriptでさまざまなグラフやアニメーションなどを描くことができる。 Canvasがない時代には、Flashプラグインでしか描画できず、ページはJavaScriptでFlashとやりとりする必要がありました。Ca

    2022-02-01 21:11:48

  • モバイル開発 HTML5 ボタンをクリックすると、ページがちらついたり、背景が黒くなったりする問題

    IOSでH5ページをテストする際、ボタンをクリックするとボタンがちらつき、黒い背景が表示され、ユーザーエクスペリエンスに影響があることがわかりました。最終的に、Dou Niangを通じて解決策を見つけました：それは、クリックされた要素にCSSプロパティまたはグローバルCSSを追加することです。 -webkit-tap-highlight-color:transparent; *{

    2022-02-01 20:40:21

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

    この製品は、ユーザーが私たちのアプリ内で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

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します