-
URLから画像を読み込み、HTML5Canvasに描画します
srcを設定した後、JavaScriptで画像オブジェクトを作成する必要があります。 ただし、描画する前にロードイベントを待つ必要があります。 以下はキャンバスです: var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var myImg = new Image(); img.onload = function() { context.drawImage(myImg, 0, 0); }; img.s
-
Ionicフレームワークの<ion-list>と<divclass=“ list”>の違いは?
Ionicは、モバイルアプリケーションの開発に使用されるオープンソースフレームワークです。ネイティブのルックアンドフィールでモバイルUIを構築するためのツールとサービスを提供します。 リストは、Webまたはモバイルアプリケーションで最も人気のある要素の1つです。これらは通常、さまざまな情報を表示するために使用されます。これらを他のHTML要素と組み合わせて、さまざまなメニューやタブを作成したり、純粋なテキストファイルの単調さを解消したりできます。イオンフレームワークは、使用を容易にするためにさまざまなリストタイプを提供します。 などのHTML形式により、探しているすべてのCSSスタイルが得
-
HTML5のMessageChannelとWebSocketの違い
Webソケット は、単一のソケット上で動作し、HTML 5準拠のブラウザのJavaScriptインターフェイスを介して公開される、Webアプリケーション向けの次世代双方向通信テクノロジです。 WebサーバーとのWebSocket接続を取得すると、send()メソッドを呼び出してブラウザーからサーバーにデータを送信し、onmessageイベントハンドラーによってサーバーからブラウザーにデータを受信できます。 ブラウジングコンテキスト間の双方向通信はチャネルメッセージングと呼ばれます。複数の発信元間の通信に役立ちます。 messageChannelの作成中に、データを送信して別のブラウジングコン
-
Polymer 1.0 dom-repeatは、HTMLで1から始まるインデックスを表示する必要があります
Polymer.jsは、Googleによって作成されたJavaScriptライブラリであり、コンポーネントを使用してアプリケーションを構築するためにHTML要素を再利用できます。 このインデックスを実現するには、インデックスを次のように設定する必要があります。 <span>{{displayIndex(index)}}</span> displayIndexは次のようになります: function (index) { return index + 1; } 例で見てみましょう: <div>Subject <span>
-
サイズを小さくすると、Flexboxレイアウトの比率が失われます
Flexboxレイアウトの問題を回避するには、以下を追加する必要があります。 * { flex-shrink: 0; min-width: 0; min-height: 0; } ここ、 flex-shrink :1-フレックスアイテムは縮小できます min-width :0-アイテムをフレックスしてコンテンツを超えて縮小する
-
'position:absolute'はflexboxと競合しますか?
絶対的な配置は、フレックスコンテナと競合しません。親の幅と値も設定する必要があります: .parent { display: flex; justify-content: center; position: absolute; width:100% } HTMLは次のとおりです。 <div class = "parent"> <div class = "child">text</div>
-
HTML5の文字エンティティとは何ですか
一部の文字はHTML5で予約されています。たとえば、ブラウザがマークアップと間違える可能性があるため、テキスト内で大小の記号や山かっこを使用することはできません。 HTML5プロセッサは、次の表にリストされている5つの特殊文字をサポートする必要があります。 記号 説明 エンティティ名 番号コード 引用符 &quot; &#34; アポストロフィ &apos; &#39; & アンパサンド &amp; &#38; 未満 &lt; &#60; より大きい-より &gt; &#62;
-
HTML5Modernizrの使用法
Modernizrは、次世代Webテクノロジーのネイティブ実装の可用性を検出する小さなJavaScriptライブラリです。 Modernizrは、対応するアクションを実行できるように、新しい機能を検出する簡単な方法を提供します。たとえば、ブラウザがビデオ機能をサポートしていない場合は、簡単なページを表示したいとします。 Modernizrの使用を開始する前に、次のようにJavaScriptライブラリをHTMLページヘッダーに含める必要があります。 <script src = "modernizr.min.js"></script> 上記のように、
-
HTML5 Webメッセージングとはどういう意味ですか?
Webメッセージングは、ドキュメントがブラウジングコンテキストを分離して、Domなしでデータを共有するための方法です。さまざまなドメイン、プロトコル、またはポートでのクロスドメイン通信の問題を無効にします。 たとえば、ページからiframeに配置された広告コンテナにデータを送信する場合、またはその逆の場合、このシナリオでは、ブラウザはセキュリティ例外をスローします。 Webメッセージングを使用すると、データをメッセージイベントとして渡すことができます。 メッセージイベントは、クロスドキュメントメッセージング、チャネルメッセージング、サーバー送信イベント、およびWebソケットを起動します。
-
PositionErrorオブジェクトHTML5ジオロケーションで返されるエラーコード
次の表に、PositionErrorオブジェクトで返される可能性のあるエラーコードを示します。 コード 一定 説明 0 UNKNOWN_ERROR 不明なエラーが原因で、メソッドはデバイスの場所を取得できませんでした。 1 PERMISSION_DENIED アプリケーションに位置情報サービスを使用する権限がないため、メソッドはデバイスの場所を取得できませんでした。 2 POSITION_UNAVAILABLE デバイスの場所を特定できませんでした。 3 タイムアウト メソッドは、指定された最大タイムアウト間隔内に位置情報
-
HTML5で進行中のwatchPosition呼び出しをキャンセルします
clearWatchメソッドは、進行中のwatchPosition呼び出しをキャンセルします。キャンセルされると、watchPosition呼び出しは、デバイスの現在の地理的位置に関する更新の取得を停止します。 <!DOCTYPE HTML> <html> <head> <script> var watchID; var geoLoc; &nb
-
HTML5 CanvasのgetContextとは何ですか?
canvas要素にはgetContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得するために使用されます。この関数は、コンテキスト2dのタイプという1つのパラメーターを取ります。 以下は、ブラウザが要素をサポートしているかどうかを確認するとともに必要なコンテキストを取得するためのコードです: var canvas = document.getElementById("mycanvas"); if (canvas.getContext){ var ctx = canvas.getContext('2d
-
HTML5キャンバスでベジェ曲線を描く
はい、HTMLキャンバスのbezierCurveTo()メソッドを使用して、HTML5でベジェ曲線を描画します。 例 次のコードを実行して、キャンバスでベジェ曲線を描くことができます。 <!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; &nbs
-
HTML5キャンバスでシャドウをドロップ
HTML5キャンバスは、図面の周りに素敵な影を作成する機能を提供します。すべての描画操作は、4つのグローバルシャドウ属性の影響を受けます。 Sr.No. プロパティと説明 1 shadowColor [=value] このプロパティは現在のシャドウカラーを返し、シャドウカラーを変更するように設定できます。 2 shadowOffsetX [=value] このプロパティは、現在のシャドウオフセットXを返し、シャドウオフセットXを変更するように設定できます。 3 shadowOffsetY [=value] このプ
-
AngularJSとHTML5を使用してリスト内のテキスト入力にフォーカスを設定する方法
リストに入力されたテキストにフォーカスを設定するには、次のコードを試してください。 newApp.directive('focus', function () { return function (scope, element, attrs) { attrs.$observe('focus', function (newValue) { newValue === 'true' && element
-
HTML5<audio>タグがAndroidWebviewで機能しない
オーディオの再生にはAndroidのMediaplayerを使用してください。 HTMLファイルに書き込んだJavaScriptからAndroidの関数を呼び出す必要があります。 WebView wv = (WebView) findViewById(R.id.webview); wv.addJavascriptInterface(new WebAppInterface(this), "Android"); public class WebAppInterface { Context mContext; WebAppIn
-
HTML5でWebワーカーを停止する
Web Workersを使用すると、クリックやその他のユーザーインタラクションに応答するスクリプトによって中断されることなく、長時間実行されるスクリプトが可能になり、ページの応答性を維持するために譲歩せずに長いタスクを実行できます。 Webワーカーは自動的に停止しませんが、Webワーカーを開始したページは、terminate()メソッドを呼び出すことでWebワーカーを停止できます。 worker.terminate(); 終了したWebワーカーは、メッセージに応答したり、追加の計算を実行したりしなくなります。ワーカーを再起動することはできません。代わりに、同じURLを使用して新しいワーカーを
-
HTML5のCORS
クロスオリジンリソースシェアリング(CORS)は、制限されたリソースをWebブラウザの別のドメインから許可するメカニズムです たとえば、html5デモセクションでHTML5-ビデオプレーヤーをクリックするとします。カメラの許可を求めます。ユーザーが許可を許可した場合、それだけがカメラを開くか、そうでない場合はWebアプリケーション用のカメラを開きません ここで、Chrome、Firefox、Opera、SafariはすべてXMLHttprequest2オブジェクトを使用し、InternetExplorerは同様のXDomainRequestオブジェクトであるオブジェクトを使用します。 fu
-
Web RTCとは何ですか?
World Wide Web Consortium(W3C)によって導入されたWebRTC。これは、音声通話、ビデオチャット、およびP2Pファイル共有用のブラウザ間アプリケーションをサポートします。 Web RTCは、以下に示すように3つのAPIを実装します- MediaStream −ユーザーのカメラとマイクにアクセスできます。 RTCPeerConnection −オーディオまたはビデオ通話機能にアクセスできます。 RTCDataChannel −ピアツーピア通信へのアクセスを取得します。 Web RTCには、ブラウザー間のピアツーピア通信が必要でした。このメカニ
-
HTML5のMathMLの例
HTML5のHTML構文では、forMathML要素を ...タグを使用してドキュメント内で使用できます。 ほとんどのWebブラウザはMathMLタグを表示できます。ブラウザがMathMLをサポートしていない場合は、Firefoxの最新バージョンを使用することをお勧めします。 例を見てみましょう: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti