HTML5 - canvas : clip

HTML

<canvas id="myCanvas" width="210" height="210"></canvas>

JQuery 1.9.1

$(function(){
  var ctx=$('#myCanvas')[0].getContext('2d');
  var _x=$('#myCanvas').width()/2;//設定圓心的x軸
  var _y=$('#myCanvas').height()/2;//設定圓心的y軸
  var radius=100;//設定半徑
  var offset=65;//設定位移距離
  ctx.save();//設定這個斷點以上的code為起始儲存點
  
  //遮罩範圍
  ctx.beginPath();//開始繪製遮罩
  ctx.arc(_x,_y,radius,0,2*Math.PI,false);//繪製一個正圓形的遮罩
  ctx.clip();//設定遮罩功能
  
  //繪製A圖
  ctx.beginPath();//開始繪製A圖
  ctx.arc(_x-offset,_y-offset,radius,0,2*Math.PI,false);//繪製一個向左上角偏移的圓形
  ctx.fillStyle='#0D4351';//設定為深藍
  ctx.fill();//填色

  //繪製B圖
  ctx.beginPath();//開始繪製B圖
  ctx.arc(_x+offset,_y,radius,0,2*Math.PI,false);//繪製一個向右偏移的圓形
  ctx.fillStyle='#EA4881';//設定為桃紅
  ctx.fill();//填色

  //繪製C圖
  ctx.beginPath();//開始繪製C圖
  ctx.arc(_x,_y+offset,radius,0,2*Math.PI,false);//繪製一個向下偏移的圓形
  ctx.fillStyle='#6BD1EA';//設定為天空藍
  ctx.fill();//填色
  
  ctx.restore();//回復起始設定
  ctx.beginPath();//開始繪製外框線
  ctx.arc(_x,_y,radius,0,2*Math.PI,false);//繪製一個正圓為外框線，包覆遮罩邊框
  ctx.lineWidth=5;//設定外框限寬度
  ctx.strokeStyle='#66B79B';//設定為綠色
  ctx.stroke();//繪製線段
});

主要使用function :

1. clip() - 用來剪裁畫布的可見範圍。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/f9qrbvsd/