HTML5 Canvas progressive filling and transparency to achieve image Mask effect

HTML5 Canvas progressive filling and transparency to achieve image Mask effect_html5 tutorial skills

WBOY

Release： 2016-05-16 15:49:18

Original

1314 people have browsed it

Explain in detail the parameter setting and use of progressive filling in HTML5 Canvas, the setting and use of transparency in Canvas, and combine the progressive filling and transparency support to achieve the Mask effect of the image.

1: Gradient Fill (Gradient Fill)
Canvas supports two progressive filling methods, one is Line Gradient Fill (Line Gradient Fill), and the other is called
It is RadialGradient Fill. The APIs are:
createLinearGradient(x1, y1, x2, y2);
where x1, y1 are the coordinates of the first point, and x2, y2 are the coordinates of the second point.
createRadialGradient(x1, y1, r1, x2, y2, r2);
where x1, y1 are the coordinates of the first center point, r1 is the radius, x2, y2 are the coordinates of the second center point, and r2 is radius.
Set the color for each point
addColorStop(position, color);
where position represents the position, the size range [0~1], 0 represents the first point, 1 represents the coordinate of the second point
Color represents the color value, any CSS color value.
After the progressive fill object is created and configured, it can be used to set the strokeStyle and fillStyle of the context to implement text,
Gradual color filling of geometric shapes.

Code demonstration of linear gradient method:
1. Vertical (Y) direction color gradient

Copy 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);

2. Horizontal (X) direction color gradient

Copy 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 color progression at the same time (XY direction)

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);

2: Transparency (Transparent)
Transparency in Canvas supports global and local transparency settings. Global transparency Settings can be achieved by setting
Context.globalAlpha. Local transparency can be achieved by setting the alpha value channel
in the color value through fillStyle. The codes for the two methods are as follows:
// change global alpha value
ctx.globalAlpha=0.5;
ctx.fillRect(50,50,75,50);
// change fill style color's alphachannel
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(50,50,75,50);
The two effects are the same.

3: Photo Transparent Gradient Mask Effect
Use radial color gradient and transparency change to achieve a translucent mask effect on the image, script running effect:

Copy 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(247, 247, 247, 0)');
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();
}