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

This article mainly explains "how to achieve transparency through Canvas in html5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to achieve transparency through Canvas in html5.

Definition and usage

The getImageData () method returns an ImageData object that copies the pixel data of the specified rectangle of the canvas.

Note: the ImageData object is not an image, it specifies a part of the canvas (rectangle) and holds information about each pixel within that rectangle.

For each pixel in the ImageData object, there are four pieces of information, namely, the RGBA value:

R-Red (0255)

G-Green (0-255)

B-Blue (0-255)

A-alpha channel (0-255; 0 is transparent, 255 is fully visible)

The color/alpha information exists as an array and is stored in the data property of the ImageData object.

Tip: after manipulating the color/alpha information in the array, you can use the putImageData () method to copy the image data back to the canvas.

Two code

Change transparency change transparency / / get the DOM object corresponding to the canvas element var canvas = document.getElementById ('mc'); / / get the CanvasRenderingContext2D object drawn on canvas var ctx = canvas.getContext (' 2d'); var image = new Image (); image.src = "test.png"; image.onload = function () {/ / draw the picture drawImage with transparency parameters (image, 124,20,0.4) } var drawImage = function (image, x, y, alpha) {/ / draw a picture ctx.drawImage (image, x, y); / / get the picture data starting from x, y, with a width of image.width and a height of image.height / / that is, var imgData = ctx.getImageData (x, y, image.width, image.height); for (var I = 0, len = imgData.data.length; I < len) I + = 4) {/ / change the transparency of each pixel imgData.data [I + 3] = imgData.data [I + 3] * alpha;} / / put the acquired image data back. Ctx.putImageData (imgData, x, y);} at this point, I believe you have a deeper understanding of "how to achieve transparency through Canvas in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.