HTML5 Canvas implements pan/zoom/rotate demo example (with screenshots)

 

HTML5 Canvas provides APIs to implement graphic translation, rotation, and zoom. 
Translate 
translates the coordinates translate(x, y) means to translate the (0,0) coordinates to (x, y), and the original (0,0) coordinates become (-x, -y) 
as shown below : 
 
The coordinate point of any original coordinate point p(ox, oy) after translate is p(ox-x, oy-y), where point (x, y) is the translation 
point coordinate translate(x, y). 
Code demo: 

copy code

code show as below:

// translate is move the startpoint to centera and back to top left corner 
function renderText(width, height, context) { 
context.translate(width/ 2, height / 2); // 中心点坐标为(0, 0) 
context.font="18px Arial"; 
context.fillStyle="blue"; 
context.fillText("Please Press <Esc> to Exit Game",5,50); 
context.translate(-width/2, -height/2); // 平移恢复(0,0)坐标为左上角 
context.fillText("I'm Back to Top",5,50); 
} 

Scale (Scale) 
Scale(a, b) means to scale the object along the XY axis to a*x, b*y size respectively. The effect is as shown in the figure: 
 

copy code

code show as below:

// translation the rectangle. 
function drawPath(context) { 
context.translate(200,200); 
context.scale(2,2);// Scale twice size of original shape 
context.strokeStyle= "green"; 
context.beginPath(); 
context.moveTo(0,40); 
context.lineTo(80,40); 
context.lineTo(40,80); 
context.closePath(); 
context.stroke(); 
} 

Rotate (rotate) 
Rotate angle rotate(Math.PI/8) 
 
The coordinates p(x, y) before the rotation and the corresponding coordinates P(rx, ry) after the rotation are 
Rx = x * cos(-angle) - y * sin(-angle); 
Ry = y * cos(-angle) + x * sin(-angle); 
90 degree rotation can be simplified as: 
Rx = y; 
Ry = -x; 
The default direction of rotation in Canvas is clockwise . The demo code is as follows: 

copy code

code show as below:

// new point.x = x * cos(-angle) -y * sin(-angle), 
// new point.y = y * cos(-angle) +x * sin(-angle) 
function renderRotateText(context) { 
context.font="24px Arial"; 
context.fillStyle="red"; 
context.fillText("i'm here!!!",5,50); 
// rotate -90 degreee 
// context.rotate(-Math.PI/2); 
// context.fillStyle="blue"; 
// context.fillText("i'm here!!!", -400,30); 
// rotate 90 degreee 
context.rotate(Math.PI/2); 
context.fillStyle="blue"; 
context.fillText("i'm here!!!",350,-420); 
console.log(Math.sin(Math.PI/2)); 
// rotae 90 degree and draw 10 lines 
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); 
} 
} 

The usual practice is to use rotation and translation together, first translate the coordinates (0,0) to the center position 
translate (width/2, height/2) and then use rotate(Math.PI/2) to complete the rotation. The 
code example is as follows: 

copy code

code show as below:

function saveAndRestoreContext(context) { 
context.save(); 
context.translate(200,200); 
context.rotate(Math.PI/2); 
context.fillStyle="black"; 
context.fillText("2D Context Rotate And Translate", 10, 10); 
context.restore(); 
context.fillText("2D Context Rotate And Translate", 10, 10); 
} 

All JavaScript code: 

copy code

code show as below:

var tempContext = null; // global variable 2d context 
window.onload = function() { 
var canvas = document.getElementById("target"); 
canvas.width = 450; 
canvas.height = 450; 
if (!canvas.getContext) { 
console.log("Canvas not supported. Please install a HTML5 compatible browser."); 
return; 
} 
// get 2D context of canvas and draw image 
tempContext = canvas.getContext("2d"); 
// renderText(canvas.width, canvas.height, tempContext); 
saveAndRestoreContext(tempContext); 
// drawPath(tempContext); 
} 
// translate is move the start point to centera and back to top left corner 
function renderText(width, height, context) { 
context.translate(width / 2, height / 2); 
context.font="18px Arial"; 
context.fillStyle="blue"; 
context.fillText("Please Press <Esc> to Exit Game",5,50); 
context.translate(-width / 2, -height / 2); 
context.fillText("I'm Back to Top",5,50); 
} 
// translation the rectangle. 
function drawPath(context) { 
context.translate(200, 200); 
context.scale(2,2); // Scale twice size of original shape 
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(-angle) - y * sin(-angle), 
// new point.y = y * cos(-angle) + x * sin(-angle) 
function renderRotateText(context) { 
context.font="24px Arial"; 
context.fillStyle="red"; 
context.fillText("i'm here!!!",5,50); 
// rotate -90 degreee 
// context.rotate(-Math.PI/2); 
// context.fillStyle="blue"; 
// context.fillText("i'm here!!!", -400,30); 
// rotate 90 degreee 
context.rotate(Math.PI/2); 
context.fillStyle="blue"; 
context.fillText("i'm here!!!", 350,-420); 
console.log(Math.sin(Math.PI/2)); 
// rotae 90 degree and draw 10 lines 
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 Context Rotate And Translate", 10, 10); 
context.restore(); 
context.fillText("2D Context Rotate And Translate", 10, 10); 
}