canvas学习笔记（七）----裁切路径_canvas clip 裁剪lineto 路径-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangyr_student/article/details/102976490

本文是关于canvas的学习笔记，重点介绍了clip()方法的使用，该方法将当前路径定义为裁剪区域，只保留与路径相交的部分。值得注意的是，clip()方法一旦使用，后续再次调用将不再生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clip（）将当前的路径转换为裁剪路径

只能用一次，后续再用，不起作用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day5-1</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = 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();

        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)
        
        var f = function(a){
          setTimeout(function(){
            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();
          },100*a)
        }

        for(var j=0;j<100;j++){
          f(j)
        }

        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();
        }
      }else{}
    }
  </script>
</body>
</html>