コンセプト：
グラフィックスを描画するとき、私たちは多くの場合、画像を回転させる、または軸の変形処理にグラフィックスを使用したい場合があり、キャンバスのAPI関数を使用して変換処理が、あなたはこの効果を実現することができます。
デフォルトでは、原点はキャンバスキャンバスの左上隅が（0,0）に対応する座標軸であり、画素単位の座標としてプロットされています！
：変換処理は、次の三つの方法を調整します
翻訳
方法を翻訳原点軸座標移動グラフィック・コンテキスト・オブジェクトを使用して、この定義は、Xは何台左側に軸移動座標の原点、単位およびyの数は、座標軸の原点の下方への移動を表しcontext.translate（x、y）は、 ！
広げます
コンテキストオブジェクトのグラフィック拡大方法グラフィックスを使用して、この定義は次のとおりcontext.scale（x、y）は
回転
必要に反時計回りならば、あなたは負の符号を変更することができ、context.rotate（角度）、および回転方向は時計回りです：グラフィックスコンテキストオブジェクトを使用する方法を回転すると、このように定義されたグラフィックスを、回転します！
アプリケーション：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタのcharset = "UTF-8" />
<タイトル>变形图形</ TITLE>
<スクリプト>
関数draw（ID）{
VARキャンバス=のdocument.getElementById（ID）;
（キャンバス== nullの）があれば
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃のFFF"。
context.fillRect（0,0,400,300）。
context.translate（200,50）。
context.fillStyle = 'RGBA（255,0,0,0.25）'。
（; iは50 <I ++がVAR I = 9）のための
{
context.translate（25,25）。
context.scale（0.95,0.95）。
context.rotate（にMath.PI / 10）。
context.fillRect（0,0,100,50）。
}
}
</ SCRIPT>
<
<キャンバスID = "キャンバス"幅= "400"高さ= "300" />
</ body>
</ HTML>
コードの参照
免責事項：この記事は再現CC BY-SA 4.0の著作権契約、次元の記事CSDNのブロガーアーロン運命」、で、元のソースのリンクと、この文を添付してください。
オリジナルリンクします。https：//blog.csdn.net/u010383937/article/details/72777953