HTML5 Canvas にパン/ズーム/回転デオムの実装例 (スクリーンショット付き)_html5 チュートリアル スキル

var tempContext = null; // グローバル変数 2D コンテキスト
window.onload = function() {
var Canvas = document.getElementById("target");
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(width, height, context) {
context.translate(width / 2, height / 2) );
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("ゲームを終了するには を押してください",5,50);
context.translate(-width / 2, -height / 2);
context.fillText("トップに戻る",5,50);
}
// 四角形を移動します。
関数drawPath(context) {
context.translate(200, 200);
context.scale(2,2); // 元の形状の 2 倍のサイズに拡大縮小します
context.bloodStyle = "green";
context.beginPath();
context.moveTo(0, 40);
context.lineTo(80, 40);
context.lineTo(40, 80);
context.closePath();
context.ストローク();
}
// 新しい point.x = x * cos(-angle) - y * sin(-angle),
// 新しい point.y = y * cos(-angle) x * sin (-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("ここにいるよ!!!",5,50);
// -90 度回転
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("ここにいるよ!!!", -400,30);
// 90 度回転 e
context.rotate(Math.PI/2);
context.fillStyle="blue";
context.fillText("ここにいるよ!!!", 350,-420);
console.log(Math.sin(Math.PI/2));
// 90度回転して10本の線を描きます
context.fillStyle="green";
for(var i=0; ivar x = (i 1)*20;
var y = (i 1)*60;
var newX = y;
var newY = -x;
context.fillRect(newX, newY, 200, 6);
}
}
関数 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);
}