What is canvas off-screen technology? How is the canvas Magnifier effect implemented?

Source: Internet
Author: User
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 canvasIn 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:

    1. Implementing Watermarks and center scaling

    2. 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:

    1. Fine canvas -grained mouse response events: Slide in, slide out, click, and Release

    2. Recalculate off-screen coordinates (see code comments for detailed formula calculation ideas)

    3. 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):


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.