ここをクリックできます: キャンバス画像の水平ミラー反転アニメーションのデモ
デモページ上の画像をクリックするとアニメーション効果が表示されます。
2. Canvas上での画像ミラー反転の実装CSS で要素の反転効果を実現するのは比較的簡単です。たとえば、特定の画像を水平方向に反転したい場合、必要な CSS は 1 行だけです。
img { 変換: スケール X(-1);}または：
img { 変換: スケール(-1, 1);}しかし、キャンバスでは、反転できないことが問題なのではなく、座標系の位置が少し面倒になります。
Canvas では、次のコードでリソースの水平ミラー反転を実現できます (コンテキストが Canvas の 2D コンテキストであると仮定します)。
context.scale(-1, 1);
または、直接行列変換するには setTransform API を使用します。
context.setTransform(-1, 0, 0, 1, 0, 0);
ただし、反転は実装されていますが、Canvas 内の要素の配置には大きな問題があります。これは、Canvas の座標変換システムが CSS の座標変換システムとは異なるためです。そのため、中央反転効果を実現したい場合は、反転する前に対象要素の中心点を変換軸に移動する必要があります。
水平方向の反転距離を取得し、ディスプレイスメント変換後にスケール前に水平方向のオフセットを変換すると、反転が常に中央に配置される効果がわかります。
言葉が薄いので、写真を撮って説明しましょう。
キャンバスのデフォルトの変更座標系は左上隅です。
したがって、水平スケールが 1、0.5、0、-0.5、-1 の場合、最終的な位置は次のようになります。
したがって、オフセットする必要がある水平距離の式を取得できます。
distance = (canvas.width – image.width * scale) / 2;
したがって、ミラーリングして画像を描画するためのキーコードは最終的に次のようになります(水平方向のスケーリングサイズがscaleであると仮定します)。
//座標参照調整 context.translate((canvas.width - image.width *scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//座標参照context.setTransform(1, 0, 0, 1, 0, 0); を復元します。
アニメーション効果を追加するにはどうすればよいですか?
Tween.js (https://github.com/zhangxinxu/tween) を使用できます。
便利な Math.animation() メソッドを使用すると、さまざまなイージング アルゴリズムが含まれており、必要な効果を簡単に実現できます。
Math.animation(form、to、duration、イージング、コールバック);
アニメーションJSは以下の通りです。
var Canvas = document.querySelector('canvas');var context = Canvas.getContext('2d');//アニメーション Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding ) { // キャンバスの内容をクリアします context.clearRect(0, 0, Canvas.width, Canvas.height); //座標を調整します context.translate((canvas.width - Canvas.width * value) / 2, 0); // スケーリングを調整します context.scale(value, 1) // 現在の画像を描画します context.drawImage(eleImg, 0, 0); //座標参照復元 context.setTransform(1, 0, 0, 1, 0, 0);}); 3. 結論もう 1 つの冷たい記事です。Canvas のフロントエンド ユーザーは少なく、一般的なテクノロジほど普及していません。しかし、古いことわざにあるように、無視するには小さすぎる善行はありません。将来、関連する問題を探すときに友人が助けてくれることを願っています。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。