古いルール、最初にソースコードを適用します。画像領域をクリックすると、アニメーションがクリック位置から始まります。
私はもともとこの効果を3年前に行いましたが、パフォーマンスはより問題があり、完全に実行できませんでした。最近、CSS効果を学ぶために純粋なCSSを学びたいと思っています。
準備1.まず、同じサイズの写真を用意してください。この例のサイズは1920 * 1080です。 CSS）。使用を容易にするために、これらの写真をHTMLの隠された要素に追加して、後で使用してください。
<div class = 'hide'> <img class = 'img' src = './images/a.jpg'/> <img class = 'img' src = './images/b.jpg'/> <img class = 'img' src = './images/c.jpg'/> <img class = 'img' src = './images/d.jpg'/> <img class = 'img' src = './画像/e.jpg '/> </div>
.hide {display：none;}2. HTMLにキャンバスキャンバスを挿入すると、サイズによって決定されますが、画像リソースの幅と高さと一致するようにする必要があります。この例のキャンバスのサイズは800 * 450です。
<canvas id = mycanvas width = 800 height = 450>あなたのブラウザはCanvas>をサポートしていません</canvas>
3.基本的なコードは、最初にキャンバスのコンテキストオブジェクトを取得します。
var ctx = document.queryselector（ '#mycanvas'）、getContext（ '2d'）、img = documeryselector（ '.beginpath（）; ctx.drawimage（i mg、0、0）; ctx .closepath（）; ctx。脳卒中 （）;成し遂げる
多くの人は、それをいくつかの小さなユニットの組み合わせであるとすぐに理解できます。
次に、ソースコードを説明する前に、キャンバスのドローイメージ関数の使用を確認しましょう。この関数の9つのパラメーターを使用する必要があるため、多くのパラメーターがあり、これらのパラメーターの意味と参照オブジェクトを念頭に置く必要があります。
Context.Drawimage（IMG、SX、SY、SWIDTHT、SHEIGHT、X、Y、幅、高さ、高さ）;
・IMG：使用するように指定する画像、キャンバス、またはビデオ
・SX：切断の切断のX座標位置
・SY：切断の切断のY座標位置
・スウィッド：カット画像の画像の幅
・Sheight：画像の高さが切断されました
・X：キャンバスに画像のx座標位置を配置します
Y：キャンバスに画像のy座標位置を配置します
・幅：使用する画像の幅
・高さ：使用したい画像の高さ
上記のパラメーターがリストされていても、開発時に気絶するのは簡単であると思います。すべての人のためのヒントは次のとおりです。最初のIMGパラメーターに加えて、最初の4つのパラメーターのサイズ参照は、1920 * 1080、800 * 450です。
この式を覚えておいてください。実際の場合、気絶するのは簡単ではありません。
分ける部門は、キャンバスにユニットのサイズを設定することです。ユニットサイズは、画像の2つのエッジの長さによって削除できることです。つまり、ユニットサイズは画像に相当する必要があります。 。過度の効果がまばゆいわけではなく、小さなパフォーマンスが圧力にさらされるため、慣習の数は必ずしも部門の最大数または最小ではありません。
この例では800 * 450のサイズをとると、ここでユニットサイズとして25 * 25を選択します。つまり、キャンバス全体が合計576セルの32 * 18で構成されています。グリッドを分割した後、基本的なパラメータースペアを計算する必要があります。
var imgw = 1920、//元の幅/高さ1080、// canvas dw = 450; I I I I I I I I I i = imgh /i;
最初の3セットのパラメーターは、4番目行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度グループ/列数を計算する必要があります行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度。これが逆になった場合、後で強制されます。 DW/DHの最後のセットは、後で調整するために使用される元の画像に拡大して変換するセルサイズです。
順番に、最初に左上隅にセルを描きます。原图裁切位置、画布摆放位置ため、最も簡単です。
ctx.drawimage（img、0、0、dh、dh、0、0、dh）;
成功。それでは、今すぐ2行目を書く方法、3番目の列に画像を書く方法は？
var i = 2、j = 3;
ここで簡単に混乱するのは裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号。
便利なため、レンダリングの原因となる純粋な機能はロジックに参加しません。
function handledRaw（img、i、j）{ctx.drawimage（img、dw*j、dh*i、dh、dw*j、dh*i、dh）;}レンダリング方法がカプセル化された後、全体像は行と列のデュアルサイクルによってレンダリングされます。
ctx.beginPath（）; （）; ctx.stroke（）;
完璧〜。実際、このステップの中核部分は完了しています。この時点で、この写真はすでに数百のセルと組み合わされており、誰もがTianmaの想像力とアニメーション効果を与えることができるからです。
アニメーションアルゴリズムを共有する前に、間違ったスペルが何であるかをお見せしましょう〜
少しクールです〜
アニメーションアルゴリズムアニメーションアルゴリズムを共有しましょう。デモの効果はどのように達成されますか？
各セルには、キャンバスのグリッドで数（i、j）がランク付けされているためです。座標（i、j）の後、座標周辺のすべてのポイントを近くまで取得できることを願っています。下の特定の写真、怠zyが絵を作るにはあまりにも〜
たとえば、座標は（3、3）です
距離が1（2、3）、（3、4）、（4、3）、（3、2）の距離がある4つのポイントがあります。
2（1、3）、（2、4）、（3、5）、（4、4）、（5、3）、（4、2）、（3、1）の距離があるポイントがあります。 （2）、（2）2）合計8つあります。
..........
また、この一連のポイントのアルゴリズムを簡単に見つけることができます。なぜなら行号差值的绝对值+ 列号差值的绝对值= 距离、特定：特定
関数countaround（i、j、dst）{var resarr = []; ）; n <=（j+dst）; ;}}} Resarrを返します;}この関数は、特定の座標と距離（DST）を与えるために使用され、座標の周りの距離上のすべてのポイントを見つけて、配列の形で戻ります。ただし、上記のアルゴリズムには、次のように境界制限が少なくなります。
Countaround（i、j、dst）{var resarr = []; ; n <=（j+dst）; =（i i -1）&& n <=（j -1）））{resarr.push（{x：m、y：n}）;}}} return resarr;}このようにして、周囲の固定距離のすべてのポイントを計算し、アニメーションレンダリングの完了を開始する純粋な関数があります。
まず、セルのコンテンツをクリアするためのクリア機能を作成します。
handleclear（i、j）{ctx.clearrect（dw*j、dh*i、dw、dh）;}別のimgは次の画像であり、最後にsetintervalを介して外側の層に新しい画像を描き、断片化された勾配効果を完成させます。
var dst = 0、intervalbj = setInterval（function（）{var resarr = countaround（i、j、dst）; resarr.foreach（it、index）{handleclear（item.x、item。y）; handledraw（anotherimg item。 x、item.y）;}）;カウントアラウンドによって返される配列の長さが0、つまり、座標ポイントのすべてのポイントが境界の外側にあり、タイマーサイクルが停止します。この時点で、すべてのコアコードが導入されています。
現在、特定のキャンバス上の座標は、このポイントから周囲に断片化された画像スイッチング効果を広めることができます。
自動回転の場合、プリセット8ポイントからアニメーションを開始します（4つの角の中間点）は次のとおりです。
var randopint = [{x：0、y：0}、{x：i -1、y：0}、{x：0、y：j -1}、{x：i -1、y：j -1 }、{x：0、y：math.ceil（j / 2）}、{x：i -1、y：math.ceil（j / 2）}、{x：math.ceil（i / 2）、 y：0}、{x：math.ceil（i / 2）、y：j -1}]クリックすると、クリックが計算され、ポイントからアニメーションを開始します。
function handleclick（e）{var offsetx = e.offsetx、officey = e.offsety、j = math.floor（offsetx / dw）、i = math.floor（offsety / dh）、// i、j、j、start start start開始するために...}、現在、この効果はデモ段階のみです。この効果は、興味のある友人に便利です。
上記は、この記事のすべての内容です。