This article brings you to the content of what is the canvas off-screen technology? How is the canvas Magnifier effect implemented? , there is a certain reference value, the need for friends can refer to, I hope you have some help.
Use
canvas
In addition to implementing filters, you can also use
off-screen technologyMagnifier function.
In order to facilitate the explanation, this article is divided into 2 application parts:
Implementing Watermarks and center scaling
Implement Magnifier
1. What is off-screen technology?
Canvas Learning and filter implementations introduce drawImage
interfaces. In addition to drawing an image, this interface can also: canvas
draw an object onto another canvas
object . This is the off-screen technology.
2. Implement Watermark and Center zoom
In the code, there are two canvas labels. are visible and not visible, respectively. The Context object on the Invisible canvas object is where we place the image watermark.
For more details, see the code Comment:
<! DOCTYPE html>
The implementation effect is as follows:
You can zoom in and out of the image by dragging slider. Then right-click to save the image. After saving the image, there is already a watermark, as shown in:
3. Implement Magnifier
On the basis of the above-mentioned center scaling, it is necessary to note the following 2 parts to realize Magnifier:
Fine canvas
-grained mouse response events: Slide in, slide out, click, and Release
Recalculate off-screen coordinates (see code comments for detailed formula calculation ideas)
Recalculate the coordinates of the mouse relative to the canvas label (see code Comment for a detailed formula calculation idea)
The code is as follows:
<! DOCTYPE html>
The magnifying glass effect is shown (the area marked by the Red Pen is our square magnifier):