HTML5_html5 チュートリアルスキルの新機能は何ですか-H5 チュートリアル-php.cn

HTML5_html5 チュートリアルスキルの新機能は何ですか

WBOY

リリース： 2016-05-16 15:46:10

オリジナル

1936 人が閲覧しました

1. HTML5 のいくつかの興味深い新機能:

描画用のキャンバス要素
メディア再生用のビデオおよびオーディオ要素
ローカルオフラインストレージのサポートの強化
記事、フッター、ヘッダー、ナビゲーション、セクションなどの新しい特別なコンテンツ要素
新しいフォームコントロール、カレンダー、日付、時刻、メール、URL、検索
2. HTML5 ビデオ<ビデオ>
1. ビデオ形式

Ogg = Theora ビデオエンコーディングと Vorbis オーディオエンコーディングを使用した Ogg ファイル
MPEG4 = H.264 ビデオエンコーディングと AAC オーディオエンコーディングを使用した MPEG 4 ファイル
WebM = VP8 ビデオエンコーディングと Vorbis オーディオを使用したエンコードされた WebM ファイル
2.

の属性

* タグ
はマルチメディアリソースを指定します。複数の
3. インスタンス

(1)

コードをコピー

コードは次のとおりです:

ビデオ</title> ;<br /> </head><br> <body><br> <video src=". HTML オーディオビデオエンコーディングツール.mp" control="controls" width="px" height="px" > ;</video><br> </body></div> </html><p></p> <p align="center"> 効果: <img src="http://files.jb51.net/file_images/article/201512/2015120116154453.png" alt=""> </p> <p align="left"><br> </p> <p>(2) HTML5 <video> - 制御に DOM を使用します (ビデオの再生/一時停止、ズームインとズームアウトを制御するには JS を使用します)<br> <br> <ヒント: JS 関数に console.log("hello"); と入力すると、ブラウザのコンソールに hello が出力されることを意味します。コンソールが hello を出力できる場合は、関数を呼び出すことができます。 <div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode34'));"><u></u></span>コードをコピー</div></div><div class="msgborder" id="phpcode34">コードは次のとおりです:<br /><br /><br /> <!DOCTYPE html PUBLIC "-/ /WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"><br> <html xmlns="http :// www.w.org//xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html-" /> ;<br> <title>Video

効果:

クリックしてビデオを拡大または縮小すると、対応する変更が表示されます。
3. オーディオ
1. オーディオ形式

control 属性は、再生、一時停止、および音量コントロールを追加するために使用されます。の間に挿入されたコンテンツは、audio 要素をサポートしていないブラウザで表示されます。 (動画内も同様)
4. HTML 5 Canvas (canvas)
1. Canvas とは
Canvas 要素はグラフィックを描画するために使用されます。ウェブページ。
※HTML5のcanvas要素はJavaScriptを使用してWebページ上に画像を描画します。canvas要素自体には描画機能はありません。すべての描画作業は JavaScript 内で実行する必要があります。
*キャンバスは、ピクセルごとに制御できる長方形の領域です。
*canvasには、パス、四角形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。
2. 関連する JS 知識:
(1) getContext("2d") オブジェクトは、さまざまな描画パス、四角形、円、文字などを備えた組み込みの HTML5 オブジェクトです。追加画像メソッド。
(2)fillStyleメソッドで色を付け、fillRectメソッドで形、位置、サイズを指定します。 [fillRect メソッドにはパラメータ (0,0,150,75) があります。意味：キャンバス上に左上隅(0,0)から開始して150x75の長方形を描画します】
3. 例
(1) 長方形の上にマウスを置くと座標が表示されます。

コードをコピー

コードは次のとおりです:

;
canvas

マウスを以下の長方形座標は次のとおりです:

onmousemove=" cnvs_getCooperatives(event)" onmouseout="cnvs_clearCooperatives()">

知識ポイント:
*clientX イベント属性は、イベントがトリガーされたときにブラウザーページ (またはクライアント領域) へのマウスポインターの水平座標を返します。クライアント領域は現在のウィンドウを参照します。
※InnerText、innerHTMLはタグ本体に対応する情報を追加できます。
効果:

(2) 線を引く

コードをコピー

コードは次のとおりです。

canvas

知識のポイント:
*moveto は特定の座標に移動すること、lineto は現在の座標から特定の座標に線を結ぶことです。これら 2 つの関数を合計すると、直線が描画されます。線を描くには「ペン」を使用する必要があり、MoveToEx() で描画するペンの開始位置 (x, y) を固定し、終了位置を固定するには LineTo 関数を使用する必要があります。終了位置 (xend、yend) を決定し、線が描画されるようにします。毎回、前の座標に接続されます。
*stroke() メソッドは、moveTo() メソッドと lineTo() メソッドで定義されたパスを実際に描画します。デフォルトの色は黒です。
効果:

(3) 円を描く
*fill()メソッドで現在の画像(パス)を塗りつぶします。デフォルトの色は黒です。
*arc() メソッドは円弧/曲線を作成します (円または部分円の作成に使用されます): context.arc(x,y,r,sAngle,eAngle,counterclockwise);

中心: 円弧(100,75,50,0*Math.PI,1.5*Math.PI)
開始角度: 円弧(100,75,50,0,1.5*Math.PI )
終了角度: 円弧(100,75,50,0*Math.PI,1.5*Math.PI)

* Cxt.beginPath(): パスを開くと、関連する属性をリセットできます。 Cxt.closePath(): パスを閉じます。

コードをコピー

コードは次のとおりです:

;
キャンバス

効果:

(4) Color Gradient
*createLinearGradient()メソッドは線形グラデーションオブジェクトを作成します。グラデーションを使用して、長方形、円、線、テキストなどを塗りつぶすことができます。 addColorStop() メソッドを使用して、さまざまな色と、グラデーションオブジェクト内の色を配置する場所を指定します。 JS 構文: context.createLinearGradient(x0,y0,x1,y1):

*addColorStop() メソッドは、グラデーションオブジェクト内の色と位置を指定します。 JS 構文: gradient.addColorStop(stop,color);

コードをコピーします

コードは次のとおりです:

画布

效果：

（5）画布上に幅の画像を配置します
*drawImage() メソッドは、画布上で画像、画布、またはビデオを作成します。また、画像の特定の部分を作成したり、追加または削除したりすることもできます。
*JS 语法 1: 画布上に画像を配置:context.drawImage(img,x,y);
*JS 语法 2: 画布上に画像を配置し、画像のサイズと高さを定義する：context.drawImage(img,x,y,width,height);
*JS语法3：剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth ,高さ,x,y,幅,高さ);

复制代記入

代記入如下:

;
画布

< ;/html>

HTML5_html5 チュートリアル スキルの新機能は何ですか

HTML5_html5 チュートリアルスキルの新機能は何ですか