[英]Create three circle mask with canvas
我需要用画布创建一个圆形面具,我正试图这样做,但我无法得到它。
我知道用Flash做到这一点,但我没有采用这种技术:
愿有人帮帮我吗? 我不太了解javascript
我需要的是在图片上创建三个不同大小的圆圈(带有背景颜色的画布)。
我知道你不是来这里做其他人的工作,但无论我多么努力,我都没有得到......
您可以根据需要添加任意数量的圆圈,您只能指明位置和所需的半径 :
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;
}
你可以在这里看到这个: http : //jsfiddle.net/tomloprod/szau09x6/
canvas
: http : //www.w3schools.com/html/html5_canvas.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.