キャンバスに通常のアニメーションとパーティクル アニメーションを実装するコード例

Canvas は Web ページ上に画像やアニメーションを描画するために使用され、キャンバスとして理解され、目的の効果がこのキャンバス上に構築されます。

Canvas では、一般的に使用される通常のアニメーションに加えて、パーティクルの概念を使用して、より複雑なダイナミック エフェクトを実現することもできます。この記事では、通常のダイナミック エフェクトとパーティクル特殊効果を使用して、単純なクロックを実装します。

通常のアニメーションでは、キャンバス API を使用して通常のパターンとアニメーションを実現します。

効果

この効果は比較的簡単に実現できます。主にスケールとポインタの間の角度オフセットの実装を分析します。

この例は時間スケールの描画です。文字盤には 12 時間があり、Math.PI は 180°、各時間は 30° を占めます。

.save() は現在のキャンバス環境の状態を保存し、それを基に描画することを意味します。描画が完了すると、以前に保存したパスのステータスと属性が返されます。

分スケールも同様で、角度とスタイルを変更するだけです。

 // 時間ごとのスケール offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // スケールの色 offscreenCanvasCtx.strokingStyle = '#fff'; // スケールの幅 offscreenCanvasCtx. lineWidth = 3; // 1 時間ごとに 30 度を占める offscreenCanvasCtx.rotate(Math.PI / 6); // 描画の開始位置 offscreenCanvasCtx.lineTo(140, 0) // 描画の終了位置 offscreenCanvasCtx.drawing();復元する（） ;

秒針を例に挙げると、現在時刻の秒を取得し、対応するオフセット角度を計算します。

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : hr; //秒針 offscreenCanvasCtx. save(); offscreenCanvasCtx.rotate(sec * (Math.PI / 30)); offscreenCanvasCtx.ストローク();

Canvas を使用すると、複雑で不規則なアニメーションを描画できます。パーティクル エフェクトを使用すると、複雑でランダムなダイナミック エフェクトを実現できます。

パーティクルは、イメージ データimageData内の各ピクセルを参照します。各ピクセルを取得した後、その領域内のパーティクルと相互作用する属性またはイベントを追加して、動的な効果を実現します。

効果

以下の図の画像変換を例に挙げると、まずキャンバス上に画像がレンダリングされ、次にテキストが配置されている領域の各ピクセルが取得されます。

 let image = new Image(); image.src='../image/logo.png'; // ストレージピクセルデータ let imageData = 300;画像をレンダリングし、領域内のピクセル情報を取得します image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //チャートのピクセル情報を取得 //画像を描画};

画像のサイズは 300*300、合計 90,000 ピクセルで、各ピクセルは 4 ビットを占有し、rgba データを格納します。

 function getPixels(){ var pos=0; var data=imageData.data; //RGBA 1 次元配列データ //ソース画像の高さと幅は 300px です for(var i=1;i<=image.width ;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; //ピクセル位置を取得 if(data[pos]>=0){ varPixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //各ピクセルをリセット位置情報 y: (canvas.height-image.height)/2+i+Math.random()*20, //各ピクセルの位置情報をリセット fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' } ピクセル.push(ピクセル); } } } 関数drawPixels() { var Canvas = document.getElementById(myCanvas); Canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = ピクセル長、curr_pixel = null for (var i = 0; i < len; i++) = ピクセル[i]; ctx.fillStyle = ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);

テキストクロックをレンダリングする

関数 time() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px 太字; ctx.fillStyle = rgba(245,245,245,0.2); （新しいDate().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);

効果

テキスト変換パーティクルの概念は上記と同じです。選択された領域内のピクセルが取得され、フィルター条件に従って選択され、配列に格納されます。トラバース後に再描画します。

 function getPixels(){ let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); let data = imgData.data ピクセル Arr = [] for(let i=1;i<=textHeight;i++){ for(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; //ピクセル位置を取得 if(data[pos]>=0){ varPixel={ x:j+Math.random()* 20 , //各ピクセルの位置情報をリセット y:i+Math.random()*20, //各ピクセルの位置情報をリセット fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }; ピクセルArr.push(ピクセル);

imgData 、選択した領域のピクセル情報を保存します。各ピクセルは 4 ビットを占有し、RGBA の 4 ビット情報を保存します。このコードは、各ピクセルの 4 番目のビットをフィルター処理して、0 以外の透明度を持つすべてのピクセルを配列pixelsArrに保存します。

xとyパーティクルの位置情報を記録し、レンダリング時にモーション効果を生み出すために、各パーティクルに 0 ～ 20 ピクセルのオフセット位置が追加され、再描画されるたびにオフセット位置が生成されます。動き。

パーティクルを取得した後、キャンバス内の元のテキストをクリアし、取得したパーティクルをキャンバス上に再描画する必要があります。

 functiondrawPixels() { // キャンバスの内容をクリアして再描画 ctx.clearRect(0,0,canvas.width,canvas.height); for (let i inPixelArr) { ctx.fillStyle = PixelArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, ピクセルArr[i].y, r, r);

パーティクルの再描画のスタイルは、ピクセルをフィルタリングするときの元の色と透明度であり、各パーティクルがキャンバス上に描画されるときに、サイズ パラメータ r が定義され、r の値は 0 ～ 4 の乱数になります。得られる粒子のサイズはランダムです。

パーティクルを取得して再描画が成功した後、ページをリアルタイムで更新する必要があります。ここではwindow.requestAnimationFrame(callback)メソッドが使用されます。

 function time() { ...... getpixels(); // パーティクルを再描画 requestAnimationFrame(time);

window.requestAnimationFrame(callback)メソッドは、アニメーションを実行することをブラウザーに伝え、次の再描画の前にアニメーションを更新するために指定された関数を呼び出すようにブラウザーに要求します。このメソッドはパラメータとしてコールバック関数を受け取り、ブラウザが再描画する前に呼び出されます。

この方法では時間間隔を設定する必要はなく、呼び出し頻度はシステム時間間隔 (1 秒) を採用します。

資料説明はこちら

効果

この記事では、主に 2 つの異なる方法でクロックの動的効果を実現します。その中で、パーティクル クロックの方が操作性が優れています。将来のキャンバス シリーズでは、パーティクル システムにさらにダイナミックなエフェクトが実装される予定です。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。