CanvasContext.clip

解释: clip 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复(通过 “restore ” 方法)。

方法参数

示例

在开发者工具中预览效果

扫码体验

CanvasContext.clip - 图1请使用百度APP扫码

图片示例

clip之前:CanvasContext.clip - 图2

clip之后:CanvasContext.clip - 图3

CanvasContext.clip - 图4

代码示例

  1. Page({
  2. onShow () {
  3. const canvasContext = swan.createCanvasContext('myCanvas')
  4. canvasContext.rect(50,20,200,120);
  5. canvasContext.stroke();
  6. canvasContext.clip();
  7. // 在 clip() 之后绘制黑色矩形
  8. canvasContext.fillStyle="black";
  9. canvasContext.fillRect(0,0,150,100);
  10. canvasContext.draw()
  11. }
  12. });