Я стараюсь обрезать холст, используя в другой форме: многоугольник (говорящий звезду) и блюд-кружок (его ребра исчезают от прозрачного до частично непрозрачного). < /p>
Вот образец кода, чтобы создать этот клип, но я полностью не могу создать «эффект Blur» вокруг круга. class = "Snippet-Code">
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const img = new Image();
img.src = "https://picsum.photos/800/600";
img.onload = function () {
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;
const radius = 70;
function draw() {
ctx.save();
ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
const starPoints = createStar(5, mouseX, mouseY, 100, 50);
ctx.beginPath();
ctx.moveTo(starPoints[0].x, starPoints[0].y);
for (let i = 1; i < starPoints.length; i++) {
ctx.lineTo(starPoints.x, starPoints.y);
}
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.restore();
}
function createStar(points, cx, cy, outerRadius, innerRadius) {
const result = [];
const angleStep = Math.PI / points;
for (let i = 0; i < 2 * points; i++) {
const angle = i * angleStep - Math.PI / 2;
const radius = i % 2 === 0 ? outerRadius : innerRadius;
result.push({
x: cx + radius * Math.cos(angle),
y: cy + radius * Math.sin(angle),
});
}
return result;
}
canvas.addEventListener("mousemove", function (event) {
mouseX = event.clientX;
mouseY = event.clientY;
draw();
});
draw();
};< /code>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
< /code>
< /div>
< /div>
Мне нужно сохранить острые края звезд, но края круга угасает < /p>
Подробнее здесь: https://stackoverflow.com/questions/797 ... red-circle
