Recently, I have encountered some problems in doing canvas related functions. Write this article to record some knowledge points that I am not familiar with canvas.
1. canvas rotation
canvas rotation brush, you can use the rotate method, the rotate method revolves around the center point, the default point is the upper left corner (0,0) position, translate method can be used to change the center point of rotation, the following two methods of rotation are introduced, which can be used according to their own needs, the key is to understand the principle of rotation.
1. Rotation Method 1
This method is to first move the center point to the center of the rectangle, then rotate, and then move the center point back to the origin (0, 0). According to the previous position and size, the figure is drawn after rotating around the center. This method, before restoring, the drawing will rotate around the position where rotate is invoked.
<html> <head> <meta charset="utf-8" /> <title>canvas Rotate around the center</title> <style> canvas { border: 1px solid #ddd; } </style> </head> <body> <canvas id="canvas" width="600" height="800"></canvas> <script> let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width; let height = canvas.height; // Rectangular parameters const x = 100; const y = 100; const rectWidth = 400; const rectHeight = 200; // Draw the rectangle before rotation var grd = ctx.createLinearGradient(100, 100, 500, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); ctx.fillStyle = grd; ctx.fillRect(x, y, rectWidth, rectHeight); // Calculate the position of the center point of the rectangle let tx = x + rectWidth / 2; let ty = y + rectHeight / 2; // First move to the center point ctx.translate(tx, ty); // Rotate 90 degrees ctx.rotate(Math.PI / 2); // // Gradient positions also need to be changed // var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2); // grd.addColorStop(0, "red"); // grd.addColorStop(1, "blue"); // ctx.fillStyle = grd; // // When drawing a rotated rectangle, it is important to note that the center point is the center of the rectangle, so the upper left coordinates need to be recalculated, not the previous x and y. // ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // // Rerotation // ctx.rotate(-Math.PI / 2); // Move back to the origin ctx.translate(-tx, -ty); // Draw rotated graphics ctx.fillRect(x, y, rectWidth, rectHeight); // Re-restore the rotation angle to avoid problems in the next drawing ctx.translate(tx, ty); ctx.rotate(-Math.PI / 2); ctx.translate(-tx, -ty); </script> </body> </html>
2. Rotation Method 2
This method is to first move the center point to the center of the rectangle, then rotate, draw, and restore to the original state. This method is to restore after drawing, but the location and distance of drawing need to be recalculated.
<html> <head> <meta charset="utf-8" /> <title>canvas Rotate around the center</title> <style> canvas { border: 1px solid #ddd; } </style> </head> <body> <canvas id="canvas" width="600" height="800"></canvas> <script> let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width; let height = canvas.height; // Rectangular parameters const x = 100; const y = 100; const rectWidth = 400; const rectHeight = 200; // Draw the rectangle before rotation var grd = ctx.createLinearGradient(100, 100, 500, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); ctx.fillStyle = grd; ctx.fillRect(x, y, rectWidth, rectHeight); // Calculate the position of the center point of the rectangle let tx = x + rectWidth / 2; let ty = y + rectHeight / 2; // First move to the center point ctx.translate(tx, ty); // Rotate 90 degrees ctx.rotate(Math.PI / 2); // Gradient positions need to be changed var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); ctx.fillStyle = grd; // When drawing a rotated rectangle, it is important to note that the center point is the center of the rectangle, so the upper left coordinates need to be recalculated, not the previous x and y. ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // Re rotation ctx.rotate(-Math.PI / 2); // Move back to the origin ctx.translate(-tx, -ty); </script> </body> </html>