canvas之clip使用

时间 2019-11-13

标签 canvas clip 使用繁體版

原文原文链接

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

<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>

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

全部在剪切路径上层的图形都会隐藏剪切路径以外的内容dom

1. Canvas&Paint[]Canvas：Matrix、Clip、Save&Restore
2. canvas裁剪clip()函数
3. 使用HTML5 Canvas API中的clip()方法裁剪区域图像
4. Canvas中的剪切clip()方法
5. canvas学习（十三）：clip之图形剪辑
6. Canvas之使用图片
7. css动画之clip
8. View.onDraw(Canvas canvas)的使用
9. canvas的使用
10. Canvas的使用
更多相关文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安装与使用
• 使用Rxjava计算圆周率