Home >Web Front-end >Front-end Q&A >How to use JavaScript to implement zoom and rotation of frame selection canvas
With the development of the Internet, JavaScript has become more and more widely used. In front-end development, especially in the field of graphics editing, zooming and rotating the canvas is a very important function. In the next article, we will introduce how to use JavaScript to realize the zoom and rotation of the frame selection canvas.
Step 1: Create the canvas
Before we start to implement the zoom and rotation of the frame-selected canvas, we need to create the canvas. In HTML, we can create a canvas using the
<canvas id="myCanvas" width="500" height="500"></canvas>
In JavaScript, we can use the following code to get the canvas element:
var canvas = document.getElementById("myCanvas");
Next we can pass the getContext of canvas The method gets the 2D context, as shown below:
var context = canvas.getContext("2d");
In this way, we have successfully created a canvas and context, and then we can draw on the canvas.
Step 2: Draw graphics
In this demo, we will draw three different rectangles and display them on the canvas. In JavaScript, we draw a rectangle using the fillRect method of canvas. The first parameter of this method is the x coordinate of the upper left corner of the rectangle, the second parameter is the y coordinate of the upper left corner of the rectangle, the third parameter is the width of the rectangle, and the fourth parameter is the height of the rectangle, as shown below:
context.fillRect(x, y, width, height);
The code for drawing three rectangles is as follows:
//矩形1 context.fillStyle="red"; context.fillRect(50,50,100,100); //矩形2 context.fillStyle="green"; context.fillRect(200,200,100,100); //矩形3 context.fillStyle="blue"; context.fillRect(350,350,100,100);
Through the above code, we have successfully drawn three rectangles on the canvas.
Step 3: Implement frame selection
Next we start to implement the frame selection function. The specific implementation process is as follows:
var startX, startY; canvas.addEventListener("mousedown", function(e) { startX = e.pageX - canvas.offsetLeft; startY = e.pageY - canvas.offsetTop; }, false);
canvas.addEventListener("mousemove", function(e) { if (e.buttons === 1) { // 按下鼠标左键拖动 var moveX = e.pageX - startX; var moveY = e.pageY - startY; context.clearRect(0, 0, canvas.width, canvas.height); drawRectangles(moveX, moveY); } }, false);
canvas.addEventListener("mouseup", function(e) { var endX = e.pageX - canvas.offsetLeft; var endY = e.pageY - canvas.offsetTop; var moveX = endX - startX; var moveY = endY - startY; context.clearRect(0, 0, canvas.width, canvas.height); drawRectangles(moveX, moveY); }, false);
Through the above code, we have successfully implemented the frame selection function, and the rectangle on the canvas can be selected by dragging the left mouse button.
Step 4: Implement canvas scaling
Next we will implement the canvas scaling function. The specific implementation process is as follows:
var scale = 1.0;
canvas.addEventListener("wheel", function(e) { e.preventDefault(); var wheelDelta = e.deltaY; if (wheelDelta > 0) scale -= 0.1; else scale += 0.1; context.clearRect(0, 0, canvas.width, canvas.height); drawRectangles(0, 0); // 传递0,0以清除框选效果 }, false);
context.scale(scale, scale);
Through the above code, we have successfully implemented the zoom function of the canvas. You can zoom in or out of the canvas by rolling the mouse wheel.
Step 5: Implement canvas rotation
Next we will implement the canvas rotation function. The specific implementation process is as follows:
var angle = 0;
canvas.addEventListener("mouseup", function(e) { if (e.button === 2) { // 按下鼠标右键 angle += 90; context.clearRect(0, 0, canvas.width, canvas.height); drawRectangles(0, 0); // 传递0,0以清除框选效果 } }, false);
context.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), canvas.width / 2, canvas.height / 2);
Through the above code, we have successfully implemented the canvas rotation function, which can be rotated by right-clicking the mouse.
To sum up, we have successfully used JavaScript to implement the zoom and rotation function of the frame selection canvas. These functions are very important in the field of graphics editing and help improve user experience and operational efficiency. If you need to use these functions in your project, you can develop based on the above code.
The above is the detailed content of How to use JavaScript to implement zoom and rotation of frame selection canvas. For more information, please follow other related articles on the PHP Chinese website!