组合

globalCompositeOperation

Coming soon....

裁切路径

canvas.fillRect(0, 0, 150, 150);
canvas.translate(75, 75);

// Create a circular clipping path
canvas.beginPath();
canvas.arc(0, 0, 60, 0, Math.PI * 2, true);
canvas.clip();

// draw background
var lingrad = canvas.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, "#232256");
lingrad.addColorStop(1, "#143778");

canvas.fillStyle = lingrad;
canvas.fillRect(-75, -75, 150, 150);

// draw stars
for (var j = 1; j < 20; j++) {
    canvas.save();
    canvas.fillStyle = "#fff";
    canvas.translate(
        75 - Math.floor(Math.random() * 150),
        75 - Math.floor(Math.random() * 150),
    );
    drawStar(canvas, Math.floor(Math.random() * 4) + 2);
    canvas.restore();
}

function drawStar(ctx: CanvasRenderingContext2D, r: number) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(r, 0);
    for (var i = 0; i < 9; i++) {
        ctx.rotate(Math.PI / 5);
        if (i % 2 == 0) {
            ctx.lineTo((r / 0.525731) * 0.200811, 0);
        } else {
            ctx.lineTo(r, 0);
        }
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}