html5画布中心圆

Michael Joseph Aubry 发表于 Dev

迈克尔·约瑟夫·奥布里

好吧，所以我是新手，我正在尝试学习。我在sorta的下面创建了一些东西-JSFiddle演示。

您会看到在中间有一个圆，我希望它是透明的，因此，很显然，如果您看下面的代码，则有两个路径或对象，无论它们叫什么，并且它们彼此重叠。显然，这不是我所需要的。

我的问题是：如何让画布元素/对象接管屏幕尺寸，并在透明中间显示背景？目标是制作类似http://www.jcsuzanne.com/的内容。我最终会从圆到字母继续前进，但是现在我不确定如何制作带有透明中心的“蒙版”。

var canvas = document.getElementById('c');

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /**
         * Your drawings need to be inside this function otherwise they will be reset when 
         * you resize the browser window and the canvas goes will be cleared.
         */
        drawStuff(); 
}
resizeCanvas();

function drawStuff() {

    if (canvas.getContext){

        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgba(0,0,0,0)';
        context.fill();
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.fillStyle = 'rgba(0,0,0,0.5)';
        context.fill();
        context.fillRect(0,0,window.innerWidth,window.innerHeight);

    }
}

用户名

您可以稍微重新组织线条，并使用复合模式在覆盖层中“打孔”整个部分：

// fill background first
context.fillStyle = 'rgba(0,0,0,0.5)';
context.fillRect(0,0,window.innerWidth,window.innerHeight);

// define the arc path
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

// stroke it
context.lineWidth = 5;
context.stroke();

// make alpha solid (the color doesn't matter)
context.fillStyle = 'rgba(0,0,0,1)';

// change composite mode and fill
context.globalCompositeOperation = 'destination-out';
context.fill();

// reset composite mode to default
context.globalCompositeOperation = 'source-over';