Как инвертировать заливку холста (я хочу прозрачную форму с полупрозрачным фоном) - PullRequest
Новая
       10

Как инвертировать заливку холста (я хочу прозрачную форму с полупрозрачным фоном)

0 голосов
/ 16 апреля 2020

Я ищу разметку холста для изображения ниже,

Я могу нарисовать фигуру, но хочу заполнить ее до прозрачного, а фон холста полупрозрачный.

Итак, во-первых, я хотел бы нарисовать прозрачный ар c на холсте, заполненном желтым цветом. Поэтому я попытался по ссылке ниже, 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function () {
    ctx.save();
    ctx.fillStyle = "yellow";
    ctx.globalAlpha = 0.2;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.clip();
    ctx.globalCompositeOperation = "xor";
    ctx.beginPath();
    ctx.arc(106, 77, 74, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
img.src = "http://i.imgur.com/gwlPu.jpg";
body {
    background-color: pink;
    padding:20px;
}
#canvas {
    border:1px solid red;
}
<canvas id="canvas" width=200 height=158></canvas>

Отражение, как на изображении ниже.

Transparent placeholder

...