Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Canvas Progressive filling and Transparency how to realize the Mask effect of Image

2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly explains the "Canvas progressive filling and transparency to achieve the image of how to achieve the Mask effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Canvas progressive filling and transparency to achieve image Mask effect how to achieve" it!

One: progressive filling (Gradient Fill)

Canvas supports two progressive filling methods, one is linear progressive filling (Line Gradient Fill), and the other is called

Is a meridional gradient fill (RadialGradient Fill). Their API are as follows:

CreateLinearGradient (x1, y1, x2, y2)

Where x1 is the first point coordinate, x2 is the second point coordinate.

CreateRadialGradient (x1, y1, R1, x2, y2, R2)

Where x1 and y1 are the first center point coordinates, R1 is the radius, x2 and y2 are the second center point coordinates, and R2 is the radius.

Set the color for each point

AddColorStop (position, color)

Where position represents the location, and the size range [0x1], where 0 represents the first point and 1 represents the second point coordinates

Color represents the color value of any CSS.

After the progressive fill object is created and configured, it can be used to set the strokeStyle and fillStyle implementation text of context.

Progressive color filling of geometric shapes.

A code demonstration of a linear progressive approach:

1. Color progression in vertical (Y) direction

Copy the code

The code is as follows:

/ / vertical/Y direction

Var lineGradient = ctx.createLinearGradient (50,0,50,200)

LineGradient.addColorStop (0, 'rgba (255,0,0,1)')

LineGradient.addColorStop (1, 'rgba (255,255,0,1)')

Ctx.fillStyle = lineGradient

Ctx.fillRect (0,0,300,300)

two。 Horizontal (X) direction color progression

Copy the code

The code is as follows:

/ / horizontal/X direction

Var lineGradient = ctx.createLinearGradient (0,50,200,50)

LineGradient.addColorStop (0, 'rgba (255,0,0,1)')

LineGradient.addColorStop (1, 'rgba (255,255,0,1)')

Ctx.fillStyle = lineGradient

Ctx.fillRect (0,0,300,300)

3. Vertical and horizontal simultaneous (XY direction) color progression

Copy the code

The code is as follows:

/ / vertical and horizontal direction

Var lineGradient = ctx.createLinearGradient (0,0,200,200)

LineGradient.addColorStop (0, 'rgba (255,0,0,1)')

LineGradient.addColorStop (1, 'rgba (255,255,0,1)')

Ctx.fillStyle = lineGradient

Ctx.fillRect (0,0,300,300)

II: transparency (Transparent)

Transparency in Canvas can be divided into global and local transparency settings, and global transparency can be set by setting

Context.globalAlpha to achieve. Local transparency can be set through the fillStyle alpha channel in the color value.

To make it happen. The codes of the two methods are as follows:

/ / change global alpha value

Ctx.globalAlpha=0.5

Ctx.fillRect (50, 50, 75, 50, 50)

/ / change fill style color's alphachannel

Ctx.fillStyle = 'rgba (225, 225 and 225)

Ctx.fillRect (50, 50, 75, 50, 50)

The two effects are the same.

Third: photo transparency progressive Mask effect

Use radial color gradient and transparency change to achieve translucent mask effect on the image, script running effect:

Copy the code

The code is as follows:

Var myImage = document.createElement ('img')

MyImage.src = ".. / test.png"

MyImage.onload = function () {

Ctx.drawImage (myImage, 80,30, myImage.naturalWidth, myImage.naturalHeight)

Var radialGradient = ctx.createRadialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200)

RadialGradient.addColorStop (0, 'rgba (2472472470)')

RadialGradient.addColorStop (0.7, 'rgba (120,120,120,0.5)')

RadialGradient.addColorStop (0.9, 'rgba (0,0,0,0.8)')

RadialGradient.addColorStop (1, 'rgba (238,238,238,1)')

Ctx.beginPath ()

Ctx.arc (canvas.width/2, canvas.height/2, 300,0, Math.PI * 2, true)

Ctx.closePath ()

Ctx.fillStyle = radialGradient

Ctx.fill ()

}

Thank you for your reading, the above is the "Canvas gradual filling and transparency to achieve the image of how to achieve the Mask effect" of the content, after the study of this article, I believe that everyone on the Canvas gradual filling and transparency to achieve the image of how to achieve the Mask effect of this problem has a deeper understanding, the specific use of cases also need to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 301

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report