HTML5キャンバスは翻訳/スケーリング/回転型の例を実装しています（スクリーンショット付き）

コメント：HTML5 Canvasは、実装できるグラフィカルAPIを提供します。これにより、翻訳、回転、スケーリングなどを実現できます。翻訳、回転、スケーリング、リファレンス写真の特定の実装を共有できます。興味のある友達はそれを参照できます。それがあなたに役立つことを願っています。

翻訳する

翻訳座標翻訳翻訳（x、y）手段（0,0）座標を（x、y）に変換し、元の（0,0）座標は（-x、-y）になります

イラストは次のとおりです。

翻訳後の元の座標ポイントP（ox、oy）の座標ポイントはp（ox-x、oy-y）で、ポイント（x、y）は翻訳です

ポイント座標翻訳（x、y）。

コードデモ：

//翻訳はスタートポイントをセンターナに移動し、左上隅に戻します

function rendertext（幅、高さ、コンテキスト）{

context.translate（width / 2、height / 2）; //中心点の座標は（0、0）です

context.font = "18px arial";

context.fillstyle = "blue";

context.filltext（ "<ec>を押してゲームを終了してください"、5,50）;

context.translate（-width/2、-height/2）; //翻訳回復（0,0）座標は左上隅です

context.filltext（ "私はトップに戻っている"、5,50）;

}

規模

スケール（a、b）は、xy軸に沿ってオブジェクトをそれぞれa*x、b*yサイズにスケーリングすることを意味します。効果は図に示されています：

//長方形を翻訳します。

関数DrawPath（コンテキスト）{

Context.Translate（200,200）;

Context.scale（2,2）; //元の形状の2倍のサイズ

context.strokestyle = "green";

context.beginpath（）;

Context.Moveto（0,40）;

Context.lineto（80,40）;

Context.lineto（40,80）;

Context.ClosePath（）;

context.stroke（）;

}

回転します

回転角度回転（math.pi/8）

回転する前の座標p（x、y）は、対応する回転の後にp（rx、ry）になります

rx = x * cos（-anger） - y * sin（-anger）;

ry = y * cos（-anger） + x * sin（-anger）;

90度の回転は、次のように簡素化できます。

rx = y;

ry = -x;

キャンバスのデフォルトの回転方向は時計回りです。デモコードは次のとおりです。

// new point.x = x * cos（-anger）-y * sin（-anger）、

// new Point.y = y * cos（-anger） +x * sin（-anger）

関数renderrotateText（コンテキスト）{

context.font = "24px arial";

context.fillstyle = "red";

context.filltext（ "I'm Here !!!"、5,50）;

// -90度回転します

// context.rotate（-math.pi/2）;

// context.fillstyle = "blue";

// context.filltext（ "I'm Here !!!"、-400,30）;

// 90度回転します

context.rotate（math.pi/2）;

context.fillstyle = "blue";

context.filltext（ "I'm Here !!!"、350、-420）;

console.log（math.sin（math.pi/2））;

// rotae 90度と10行を描きます

context.fillstyle = "green";

for（var i = 0; i <4; i ++）{

var x =（i+1）*20;

var y =（i+1）*60;

var newx = y;

var newy = -x;

context.fillrect（newx、newy、200、6）;

}

}

通常の練習は、回転と翻訳を使用し、最初に座標（0,0）を中心位置に翻訳することです。

翻訳（幅/2、高さ/2）を翻訳してから、回転（math.pi/2）を回転させて回転を完了します

コードの例は次のとおりです。

function saveandrestorecontext（context）{

context.save（）;

Context.Translate（200,200）;

context.rotate（math.pi/2）;

context.fillstyle = "black";

context.filltext（ "2Dコンテキストは回転して翻訳"、10、10）;

context.restore（）;

context.filltext（ "2Dコンテキストは回転して翻訳"、10、10）;

}

すべてのJavaScriptコード：

var tempContext = null; //グローバル変数2Dコンテキスト

window.onload = function（）{

var canvas = document.getElementById（ "ターゲット"）;

canvas.width = 450;

canvas.height = 450;

if（！canvas.getContext）{

console.log（ "サポートされていないキャンバス。HTML5互換ブラウザをインストールしてください。"）;

戻る;

}

//キャンバスの2Dコンテキストを取得し、画像を描画します

tempContext = canvas.getContext（ "2d"）;

// rendertext（canvas.width、canvas.height、tempContext）;

saveandrestorecontext（tempContext）;

// DrawPath（tempContext）;

}

//翻訳はスタートポイントをセンターナに移動し、左上隅に戻る

function rendertext（幅、高さ、コンテキスト）{

context.translate（width / 2、height / 2）;

context.font = "18px arial";

context.fillstyle = "blue";

context.filltext（ "<ec>を押してゲームを終了してください"、5,50）;

context.translate（-width/2、-height/2）;

context.filltext（ "私はトップに戻っている"、5,50）;

}

//長方形を翻訳します。

関数DrawPath（コンテキスト）{

Context.Translate（200、200）;

Context.scale（2,2）; //元の形状の2倍のサイズをスケーリングします

context.strokestyle = "green";

context.beginpath（）;

Context.Moveto（0、40）;

Context.lineto（80、40）;

Context.lineto（40、80）;

Context.ClosePath（）;

context.stroke（）;

}

// new point.x = x * cos（-anger） - y * sin（-anger）、

// new Point.y = y * cos（-anger） + x * sin（-anger）

関数renderrotateText（コンテキスト）{

context.font = "24px arial";

context.fillstyle = "red";

context.filltext（ "I'm Here !!!"、5,50）;

// -90度回転します

// context.rotate（-math.pi/2）;

// context.fillstyle = "blue";

// context.filltext（ "I'm Here !!!"、-400,30）;

// 90度回転します

context.rotate（math.pi/2）;

context.fillstyle = "blue";

context.filltext（ "I'm Here !!!"、350、-420）;

console.log（math.sin（math.pi/2））;

// rotae 90度と10行を描きます

context.fillstyle = "green";

for（var i = 0; i <4; i ++）{

var x =（i+1）*20;

var y =（i+1）*60;

var newx = y;

var newy = -x;

context.fillrect（newx、newy、200、6）;

}

}

function saveandrestorecontext（context）{

context.save（）;

Context.Translate（200,200）;

context.rotate（math.pi/2）;

context.fillstyle = "black";

context.filltext（ "2Dコンテキストは回転して翻訳"、10、10）;

context.restore（）;

context.filltext（ "2Dコンテキストは回転して翻訳"、10、10）;

}