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