我需要使用canvas创建一个圆形遮罩,我正在尝试实现,但是我无法达成目标。我知道可以在Flash中做到这一点,但我更喜欢不使用该技术:
有人能帮助我吗?我对JavaScript了解不多。
我需要在图片上(带有背景颜色的画布)创建三个不同大小的圆形。
我知道您不是来做别人工作的,但无论我如何尝试,我都没有成功...
![enter image description here](https://istack.dev59.com/jJBN5.gif)
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;
}
canvas
的信息:http://www.w3schools.com/html/html5_canvas.asp