Canvas Progressive filling and Transparency how to realize the Mask effect of Image
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!
