canvas之clip使用原

裁切路径和普通的canvas图形差不多，不同的是它的作用是遮罩，用来隐藏路径以外的部分。 clip() 将当前正在构建的路径转换为当前的裁剪路径，默认情况下，canvas有一个与它自身一样大的裁切路径（也就是没有裁切效果）

代码语言：javascript复制

<body>
    <canvas id="canvas" width="400" height="400" style="background:#f2f2f2"></canvas>
    <script>
    function draw() {
        var ctx = document.getElementById("canvas").getContext("2d");
        ctx.fillRect(0, 0, 150, 150);
        ctx.translate(75, 75);
        //创建一个圆形的剪切路径,对下面含有渐变色的背景进行剪切成圆形
        ctx.beginPath();
        ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
        ctx.clip();

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

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

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

    }

    function drawStar(ctx, r) {
        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();
    }
    draw()
    </script>
</body>

解释：先画了一个黑色的背景，然后画一个剪切路径，接着画显示渐变色的矩形，最后画一些随机的星星，

所有在剪切路径上层的图形都会隐藏剪切路径之外的内容

(adsbygoogle = window.adsbygoogle || []).push({});

canvas

0 人点赞

canvas之clip使用 原

canvas之clip使用原