Masking 遮罩

Basic Masking 基本遮罩

To create a shape that masks other shapes, set the mask property to true.
为了创建用来遮挡其它图形的图形，请设置mask属性为true。

// This shape is a mask 这个图形是一个遮罩
$('canvas').drawArc({
  fillStyle: '#36b',
  x: 150, y: 150,
  radius: 50,
  mask: true
})
// This shape is being masked 这个图形是被遮挡的
.drawRect({
  fillStyle: '#6c1',
  x: 100, y: 120,
  width: 100, height: 100
})
// Restore mask 恢复遮罩
.restoreCanvas();

To restore the mask and prevent masking of future shapes, call the restoreCanvas() method.
为了恢复遮挡效果，并阻止对后续图形的遮挡，请调用restoreCanvas()方法。

Layer masks 层遮罩

You can also create layers that mask other layers by using the mask property. A layer that is a mask is generally referred to as a 'layer mask'.
你也可以使用mask属性创建一个层来遮挡其它层，作为遮罩的层一般指的是“层遮罩”。

// This layer is a mask 这个层是遮罩
$('canvas').drawArc({
  layer: true,
  fillStyle: '#36b',
  x: 150, y: 150,
  radius: 50,
  mask: true
})
// This layer is being masked 这个层是被遮挡的
.drawRect({
  layer: true,
  fillStyle: '#6c1',
  x: 100, y: 120,
  width: 100, height: 100
})
// Restore layer mask 恢复遮挡
.restoreCanvas({
  layer: true
});

However, when creating layer masks, the restoreCanvas() method must be made into a layer using the layer property, as demonstrated above. For more information, see the Restore Canvas section.
但当你创建了层遮罩时，restoreCanvas()方法必须使用layer属性来转化为层，像上边示范的那样。想要获取更多信息，参考“恢复画布”那一部分。

Masking draggable layers 遮挡可拖拽层

In this example, move the shapes to see how layer masks affects the draggability of other shapes.
在本例中，移动形状来查看层遮罩是如何影响其它图形的可拖拽性的。

// Draw blue square 画蓝正方形
$('canvas').drawRect({
  layer: true,
  draggable: true,
  mask: true,
  name: 'blue',
  fillStyle: '#36c',
  x: 150, y: 150,
  width: 150, height: 150
})
// Draw orange rectangle 画桔色矩形
.drawRect({
  layer: true,
  draggable: true,
  name: 'orange',
  fillStyle: '#f63',
  x: 80, y: 120,
  width: 80, height: 30
})
// Restore blue mask 恢复蓝遮罩
.restoreCanvas({
  layer: true
})
// Draw green circle 画绿圆
.drawArc({
  layer: true,
  mask: true,
  draggable: true,
  name: 'green',
  fillStyle: '#6c1',
  x: 200, y: 200,
  radius: 50
})
// Draw red rectangle 画红矩形
.drawRect({
  layer: true,
  draggable: true,
  name: 'red',
  fillStyle: '#c33',
  x: 180, y: 180,
  width: 50, height: 30
})
// Restore green mask 恢复绿遮罩
.restoreCanvas({
  layer: true
})