HTML5オーディオ（音声）
定義と使用法
<audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签。 </audio>
ヒント：あなたは、古いブラウザがタグをサポートしていない情報を表示できるように、開始タグと終了タグの間のテキストを配置することができます。
オーディオ形式のMIMEタイプ
| フォーマット |
MIMEタイプ |
| MP3 |
オーディオ/ MPEG |
| オッグ |
オーディオ/ OGG |
| wavファイル |
オーディオ/ wavファイル |
プロパティ
| プロパティ |
値 |
説明 |
| 自動再生 |
自動再生 |
この属性が存在する場合は、準備ができた後、すぐにオーディオ再生。 |
| コントロール |
コントロール |
この属性が存在する場合、そのような再生ボタンとして、ユーザーコントロールに表示されます。 |
| ループ |
ループ |
この属性が存在する場合、いつでもオーディオ終わり、再び再生を開始します。 |
| ミュート |
ミュート |
ビデオ出力の規定がミュートされなければなりません。 |
| プリロード |
プリロード |
この属性が存在している場合は、ページがロードされ、再生の準備ができたときに、オーディオがロードされます。あなたが「自動再生」を使用している場合、この属性は無視されます。 |
| SRC |
URL |
あなたがオーディオを再生したいURL。 |
最小デモコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签。 </audio>
</body>
</html>
srcが独自のローカルパスを変更することができ、注意を払うには、ボリューム、その後プレーを調整してください。
「光」陳穀物
HTML5ビデオ（動画）
<video src="movie.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>
ビデオフォーマット
| フォーマット |
MIMEタイプ |
| MP4 |
ビデオ/ MP4 |
| WebMの |
ビデオ/ WEBM |
| オッグ |
ビデオ/ OGG |
HTML5 Audio/Video 方法
| 方法 |
説明 |
| addTextTrack（） |
/ビデオ、オーディオトラックに新しいテキストを追加します |
| canPlayType（） |
ブラウザが指定されたオーディオ/ビデオ形式を再生できるかどうかを検出します |
| 負荷（） |
オーディオ/ビデオ要素をリロード |
| 演奏する（） |
オーディオ/ビデオの再生を開始 |
| 一時停止（） |
現在再生中のオーディオ/ビデオを一時停止 |
より具体的なさらなる調査に使用されるだけでいくつかの一般的な方法。
最小デモコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video src="video.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>
</body>
</html>
HTML5キャンバス
HTML5のcanvas要素は、スクリプト（通常はJavaScript）によって行われ、グラフィックスを描画するために使用されます。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
canvas要素を作成し、スタイル属性を使用して境界線を追加します。
色、パターンと影
| プロパティ |
説明 |
| fillStyle |
または戻って描画を充填する色、グラデーション、またはパターンを設定します |
| strokeStyle |
または脳卒中のカラーセット、またはグラデーションのモードを返します。 |
| shadowColorは |
色むらやリターンを提供 |
| shadowBlur |
設定またはシャドウのぼかしのレベルを返します。 |
| shadowOffsetX |
または影の形状から戻って水平距離を設定します |
| shadowOffsetY |
シャドウ垂直距離の形状からセットまたはリターン |
| 方法 |
説明 |
| createLinearGradientは（） |
（キャンバス含有量）の線形グラデーションを作成します。 |
| createPattern（） |
指定した方向に指定された要素を繰り返し |
| createRadialGradient（） |
（キャンバスの内容に）ラジアル/円形状のグラデーションを作成します |
| addColorStop（） |
オブジェクトと停止位置に指定されたグラデーションカラー |
キャンバス - グラデーション
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<div>
<div> 线性渐变:</div>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<div>
<div> 径向/圆渐变:</div>
<canvas id="myCanvas2" width="200" height="200"></canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
ラインスタイル
| プロパティ |
説明 |
| このlinecap |
設定または返しますラインエンドキャップスタイル |
| たlineJoin |
2線が交差またはリターンが設定されている場合、コーナーのタイプが作成します |
| 線幅 |
または現在設定されている線幅を返します。 |
| miterLimitの |
セットまたはリターンマイターの最大長 |
長方形
| 方法 |
説明 |
| RECT（） |
長方形を作成します。 |
| fillRect（） |
描画四角形「で満たされています」 |
| strokeRect（） |
長方形（塗りなし）を描きます |
| clearRect（） |
所定の矩形内のピクセルをクリア |
パス
| 方法 |
説明 |
| 塗りつぶし（） |
現在の図面を充填する（経路） |
| ストローク（） |
定義されたパスを描きます |
| パスを開始（） |
パスの開始、または現在のパスをリセット |
| へ引っ越す（） |
キャンバスで指定されたポイントへのパスは、行を作成しないでください |
| closePath（） |
パスの開始点までの現在のポイントバックから作成 |
| lineTo（） |
新しい点を追加し、キャンバスに指定された最後の点まで、その点からラインを作成します |
| クリップ（） |
元のキャンバス領域から任意の形状およびサイズを削減 |
| quadraticCurveTo（） |
二次ベジェ曲線を作成します。 |
| いるbezierCurveTo（） |
立方ベジェ曲線を作成します。 |
| アーク（） |
（丸い又は円形のセクションを作成する）アーク/曲線を作成 |
| arcTo（） |
2つの接線間のアーク/カーブを作成します。 |
| isPointInPath（） |
現在のパスで指定された点あれば、そうでない場合はfalse、trueを返します |
キャンバス - パス
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
変更
| 方法 |
説明 |
| 規模（） |
より大きい又はより小さいと、現在の図面をスケーリング |
| 回転（） |
現在の図面を回転させます |
| 翻訳（） |
キャンバス上の（0,0）の位置を再マッピング |
| 変換（） |
あるいは現在の変換行列を描きます |
| 設定トランスフォーム（） |
現在の変換行列にリセットされます。その後）（変換を実行 |
テキスト
| プロパティ |
説明 |
| フォント |
設定または返します現在のフォント属性のテキストコンテンツを |
| textAlign |
設定または返します現在のテキストの配置 |
| テキストのベースライン |
设置或返回在绘制文本时使用的当前文本基线 |
| 方法 |
描述 |
| fillText() |
在画布上绘制“被填充的”文本 |
| strokeText() |
在画布上绘制文本（无填充） |
| measureText() |
返回包含指定文本宽度的对象 |
Canvas - 文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("小橘子ღ",10,100);
ctx.strokeText("Hi~ Canvas",10,50);
</script>
</body>
</html>
图像绘制
Canvas - 图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<img id="scream" src="https://pic.cnblogs.com/avatar/1979230/20200321083100.png" alt="小橘子ღ">
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"> 您的浏览器不支持 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10)//若不显示画像则注释这行，取消注释下面三行
// img.onload = function(){
// ctx.drawImage(img, 10, 10)
// }
</script>
</body>
</html>
注意：这里有个坑，考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做。即绘图失败。
所以我们应该保证在 img 绘制完成之后再 drawImage。
var img = new Image(); // 创建img元素
img.src = 'https://pic.cnblogs.com/avatar/1979230/20200321083100.png'; // 设置图片源地址
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
像素操作
| 属性 |
描述 |
| width |
返回 ImageData 对象的宽度 |
| height |
返回 ImageData 对象的高度 |
| data |
返回一个对象，其包含指定的 ImageData 对象的图像数据 |
| 方法 |
描述 |
| createImageData() |
创建新的、空白的 ImageData 对象 |
| getImageData() |
返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() |
把图像数据（从指定的 ImageData 对象）放回画布上 |
合成
| 属性 |
描述 |
| globalAlpha |
设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation |
设置或返回新图像如何绘制到已有的图像上 |
进阶操作