ホームページ > 記事 > ウェブフロントエンド > HTML5 高度なプログラミンググラフィックの歪みとその応用 1 (原理)

HTML5 高度なプログラミンググラフィックの歪みとその応用 1 (原理)

黄舟オリジナル: 2017-03-02 13:34:201913ブラウズ

HTML5 のいくつかの変形

HTML5 には次のメソッドを含むいくつかの変形メソッドがあります

scale() scaling
rotate() 回転
translate() translation
transform() 行列変形
setTransform() 行列のリセット

これらの方法で以下の写真の加工を完了できます

ただし、以下の不規則な変形を実現したい場合はうまくいきません

まずはステップバイステップでやってみましょうHTML5のメソッド。

4 、傾斜コード

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="280"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.scale(0.5,0.5);
	ctx.drawImage(img,500,0);
};
</script>
</body>
</html>

効果

不規則な変形

前述のように、HTML5 は不規則な変形を直接実装できませんが、次のような一連の組み合わせによって実現できます。次のような変形

に分解してみましょう

まとまってきたら、こうしていくつかの変形を取り出して、それをつなぎ合わせて新しい形にすると、今の特別な形になります

以下このアイデアでは、AS3 に従って、画像を複数に分解しました。小さな三角形の効果は次のとおりです

このように、drawtriangles 関数はグラフィックを歪めるために簡単に実装できます。その機能は基本的にdrawtriangles と同じです。 AS3 の関数との違いは、4 番目以降のパラメータの意味が異なり、4 番目のパラメータは分割線の太さを表し、設定されていない場合は 5 番目のパラメータが分割線の色を表します。この機能の効果は次のとおりです。3D 変形も可能です

画像内の赤い点をドラッグして接続できます。何らかの方法で画像を歪ませたり変形させたりするには

http://lufy.netne.net/lufylegend-js/lufylegend -1.4/beginBitmapFill/sample01.html

このdrawtriangles関数を使用するには、バージョン1.5をダウンロードする必要があります。 lufylegend 1.5のリリースアドレスは以下の通りです

http://blog.csdn.net/lufy_legend/article/details/8054658

上記はHTML5 Advanced Programming Graphic Distortionの内容です。およびその応用 (原則) 関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 高度なプログラミンググラフィックの歪みとその応用 2 (応用編)次の記事：HTML5 高度なプログラミンググラフィックの歪みとその応用 2 (応用編)

続きを見る

HTML5 高度なプログラミング グラフィックの歪みとその応用 1 (原理)

HTML5 のいくつかの変形

関連記事

HTML5 高度なプログラミンググラフィックの歪みとその応用 1 (原理)