HTML5 Canvas implements translation/scaling/rotating deom example (with screenshot)

Comment: HTML5 Canvas provides a graphical API that can be implemented, through which you can simply realize translation, rotation, scaling, etc. Let me share with you the specific implementation of translation, rotation, scaling and reference pictures. Interested friends can refer to it. I hope it will be helpful to you.

Translate

Translate coordinates translate(x, y) means to translate the (0,0) coordinates to (x, y), and the original (0,0) coordinates become (-x, -y)

The illustration 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 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); // The coordinates of the center point are (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); // Translation recovery (0,0) coordinates are the upper left corner

context.fillText("I'm Back to Top",5,50);

}

Scale

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

// translate 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 angle rotate(Math.PI/8)

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

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

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

Rotation of 90 degrees can be simplified to:

Rx = y;

Ry = -x;

The default rotation direction in Canvas is clockwise. The demo 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 degree

// context.rotate(-Math.PI/2);

// context.fillStyle="blue";

// context.fillText("i'm here!!!", -400,30);

// rotate 90 degree

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, first translate the coordinates (0,0) to the center position.

translate (width/2, height/2) and then rotate (Math.PI/2) to complete the rotation

The 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'm Back to Top",5,50);

}

// translate 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 degree

// context.rotate(-Math.PI/2);

// context.fillStyle="blue";

// context.fillText("i'm here!!!", -400,30);

// rotate 90 degree

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

}