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

This article will explain in detail how the Mask effect of HTML5 Canvas progressive filling and transparent image implementation is. The quality of the article content is high, so Xiaobian shares it with you as a reference. I hope you have a certain understanding of relevant knowledge after reading this article.

Detailed explanation of HTML5 Canvas progressive fill parameter settings and use, Canvas transparency settings and use, combined with progressive fill and transparency support, to achieve the image Mask effect.

1: Gradient Fill

Canvas supports two progressive fill methods, one is Line Gradient Fill, and the other is Line Gradient Fill.

For Radial Gradient Fill. Their 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 the radius.

Set color for each point

addColorStop(position, color);

where position represents position, size range [0~1] where 0 represents the first point, 1 represents the second point coordinates

Color represents the color value, any CSS color value.

Progressive fill objects can be used to set context strokeStyle and fillStyle after creation and configuration

Progressive color fill of geometry.

Code demonstration for linear progression:

1. Vertical (Y) color progression

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) color progression

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

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

Transparency in Canvas supports global and local transparency settings. Global transparency settings can be set by setting

Context.globalAlpha. Local transparency can be set through fillStyle color values alpha value channel

to achieve. The two codes 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);

Both effects are the same.

Three: Photo Transparency Progressive Mask Effect

Use radial color gradients and transparency changes to achieve a translucent mask effect on the image, script runs

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

}

About HTML5 Canvas progressive fill and transparent implementation of image Mask effect is how to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

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.