Geek Answers Handbook

Create a 3D canvas mask

I need to create a round mask with a canvas, I try to do it, but I can’t get it.

I knew what to do with Flash, but I'm sure I can do without this technology: enter image description here

Can someone help me? I don't know too much about javascript

I need to create three images with different sizes in the picture (canvas with background color).

I know that you are not here to do the work of others, but no matter how hard I try, I have not received ...

+5
source share
1 answer

You can add as many circles as you need, you should specify only the position and the desired radius :

JavaScript:

var context = document.getElementById('canvas').getContext('2d'); // Color of the "mask" context.fillStyle = '#000'; // Rectangle with the proportions of the image (600x400) context.fillRect(0,0,600,400); /** * @param x Specifies the x-coordinate * @param y Specifies the y-coordinate * @param radius Specifies radius of the circle */ var clearCircle = function(x, y, radius){ context.save(); context.globalCompositeOperation = 'destination-out'; context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.fill(); context.restore(); }; // First circle clearCircle(155, 190, 50); // Second circle clearCircle(300, 190, 70); // Third circle clearCircle(440, 200, 60);

HTML:

 <canvas id="canvas" width="600" height="400" />

CSS

 canvas{ background: url("http://cdn2.epictimes.com/derrickblair/wp-content/uploads/sites/9/2015/01/happy-people.jpg") no-repeat; }


You can see it in action here: http://jsfiddle.net/tomloprod/szau09x6/

Related links:

+5
source

More articles:


All Articles