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