HTML5 Canvas pan, zoom, rotate image and text code details-H5 Tutorial-php.cn

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  to Exit Game",5,50); context.translate(-width/2,-height/2); // 平移恢复(0,0)坐标为左上角 context.fillText("I'm Back to Top",5,50); }

Copy after login

##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(); }

Copy after login

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

Copy after login

Rotation90

degrees can be simplified to:

Rx = y; Ry = -x;

Copy after login

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); } }

Copy after login

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); }

Copy after login

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  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); }

Copy after login

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