この間、私はキャンバスを勉強してきました。
作成方法：
1.ページにビデオをロードしますCanvasを使用してこのスクリーンショット機能を作成する場合、最初にページがロードされて完了し、簡単に操作できるようにする必要があります。 <video>ラベルを下に使用する場合：
<ビデオループコントロールID = testmp4 width = 500 height = 400> <source src = test.mp4 type = video/mp4> <source src = test.webm type/webm> <sour ce src = test.oggタイプ=ビデオ/ ogg> </video>
私の「HTML5とビデオ」では、ブラウザはビデオのプリロードされた進行状況とロードイベントをサポートしており、ビデオの再生やその他のイベントに影響します。そのため、JSを使用してビデオを作成してビデオを紹介します。
このようにして、動画の導入に注意する必要があります。そのため、最初にビデオ形式のブラウザのサポートを判断する必要があります。
1.1サポート形式を判断するには、ビデオのcanplayType（）メソッドを使用しますcanplayType（）メソッドはパラメーターを渡す必要があります。このパラメーターはビデオの形式です。
一般的に使用される値：ビデオ/ogg;
ビデオ/mp4;
ビデオ/webm;
またはエンコーダーを含めます：
ビデオ/ogg = Theora、Vorbis
ビデオ/mp4;
ビデオ/webm;
返品値：Webページのサポートレベルを示します。
function videytypes（video）{var return = ''; 'mp4';} else if（video.canplaytype（ 'video/ogg'）== 'culy' || video.canplaytype（ 'video/ogg'）== 'mayce'）{<br> retunty pe = 'ogg '; <br>} else（video.canplaytype（' video/webm '）==' || video.canplayType（ 'video/webm'）== 'may。{<br> retuntyp e =' webm '; <br>} <br> returnType;}この関数は、ビデオに対するブラウザのサポートの形式を決定できます。
1.2 JSダイナミックロードビデオタグを使用しますここでブラウザのサポート形式を審査した後、Chromeを使用しているため、ブラウザはMP4形式のビデオをサポートし、ビデオタグを動的に作成します。
var videodiv; videotypte（videoelem）;
ここでスクリーンショット機能を作成したいので、シンプルなビデオにはスクリーンショットのインターフェイスがないため、キャンバスにコピーしてキャンバスでこのビデオをブロードキャストする必要があります。
2.キャンバスコピービデオを使用します次に、ビデオがブラウザで再生されました。次にCanvasにコピーし、最初にキャンバスを構築し、次にキャンバスコンテキストを取得します。キャンバスでビデオを描く方法では、機能を使用する必要があります。ドローイメージ関数の使用
1。Drawimage（IMG、X、Y）：キャンバス（x、y）の位置にIMGを描画します。
2。Drawimage（IMG、X、Y、幅、高さ）：高さ、高さの高い幅のIMGを描画します。
3.drawimage（IMG、SX、SY、SWIDTHT、SHEIGHT、X、Y、幅、高さ、高さ）：スウィッド幅のキャンバス（X、Y）位置にIMG（SX、SY）位置を描画します。 Sheight Screenshot、キャンバスを幅と高さの高さまで引きます。
上記は、この機能の使用です。
スクリーンショットに戻ると、ブラウザ-ContextVideoでキャンバスを作成しました。次に、ここでビデオを描画します。
ContextVideo.Drawimage（VideoElem、0,0）;
その後、キャンバスで写真を見ることができますが、ビデオは絶えず変化しているため、SetInterval関数を使用してソースとして引き続き描画する必要があります。
setInterval（function（）{<br> contextvideo、drawimage（videoelem、0,0）; <br>}、100）ここでの時間間隔のサイズは、ビデオ再生がカードになるかどうかに影響します。
この時点で、ビデオをキャンバスに移動しました。次にスクリーンショットを作成します。
3.スクリーンショットを表示するキャンバスパネルを表示しますここでは、Page-ContextImgにキャンバスキャンバスを描画し、DrawImageメソッドを使用してスクリーンショットを再度使用する必要があります。
contextimg.drawimage（canvasvideo、0,0、canvasvideo.width、canvasvideo.height）;
このコードは、最初のキャンバスを2番目のキャンバスに描画します。
4.スクリーンショットボタンを作成しますボタンを作成し、クリックイベントをクリックした後、前の関数を呼び出して、スクリーンショットを作成できます。
グラフが切断されると、右のボタンを保存し、PSに注ぎ、絵文字を作成できます。
上記は、この記事のすべての内容です。