剪裁区域

代码运行

<!DOCTYPE HTML>
<html>
  <head>
    <title>剪裁区域</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var offset = 50;

/*
       * save() allows us to save the canvas context before
       * defining the clipping region so that we can return
       * to the default state later on
       */
      context.save();
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.clip();

// draw blue circle inside clipping region
      context.beginPath();
      context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'blue';
      context.fill();

// draw yellow circle inside clipping region
      context.beginPath();
      context.arc(x   offset, y, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();

// draw red circle inside clipping region
      context.beginPath();
      context.arc(x, y   offset, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();

/*
       * restore() restores the canvas context to its original state
       * before we defined the clipping region
       */
      context.restore();
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 10;
      context.strokeStyle = 'blue';
      context.stroke();
    </script>
  </body>
</html>