HTML5 Canvas pan, zoom, rotate image and text code details

HTML5 Canvas provides APIs for graphic translation, rotation, and scaling.

Translation (translate)

Translation coordinates translate(x, y) means (0,0) The coordinates are translated to (x, y), and the original (0,0) coordinates become (-x, -y)

The diagram is as follows:

The coordinate point of any original coordinate point p(ox, oy) after translation is p(ox-x, oy-y), where the point (x , y) is the translation point coordinate translate(x, y).

Code demo:

// 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&#39;m Back to Top",5,50);
}

##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 picture:

##

// 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)

Rotation angle rotate(Math.PI/8)

The coordinate p(x, y) before rotation and the corresponding coordinate P(rx, ry) after rotation are

Rx = x * cos(-angle)- y * sin(-angle);
Ry = y * cos(-angle) + x * sin(-angle);

Rotation90

degrees can be simplified to:

Rx = y;
Ry = -x;

The default direction of rotation in Canvas is clockwise. The demonstration code is as follows:

// 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 approach is to use rotation and translation together, first change the coordinates (0,0)

Translate to the center position

translate (width/2, height/2)Then use

rotate(Math.PI/2)

Complete rotationThe code example is as follows:

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:

##

		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&#39;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&#39;m here!!!",5,50);
			
			// rotate -90 degreee
			// context.rotate(-Math.PI/2);
			// context.fillStyle="blue";
			// context.fillText("i&#39;m here!!!", -400,30);
			
			// rotate 90 degreee
			context.rotate(Math.PI/2);
			context.fillStyle="blue";
			context.fillText("i&#39;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);
		}

The above is HTML5 Canvas panning, Zoom and rotate graphic code details. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!