用画布创建三个圆形蒙版答案

【问题标题】：Create three circle mask with canvas用画布创建三个圆形蒙版
【发布时间】：2015-08-06 16:33:48
【问题描述】：

我需要用画布创建一个圆形蒙版，我正在尝试这样做，但我做不到。

我知道使用 Flash 可以做到这一点，但我更喜欢不使用该技术：

有人可以帮我解决这个问题吗？我对javascript不太了解

我需要的是在一张图片上创建三个不同大小的圆圈（带有背景颜色的画布）。

我知道你来这里不是为了做别人的工作，但无论我怎么努力我都没有得到......

【问题讨论】：

标签： javascript html canvas mask

【解决方案1】：

您可以根据需要添加任意数量的圆圈，您只需指明位置和所需半径：

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/

相关链接：