在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

CanvasRenderingContext2D .clip() method of the Canvas 2D API turns the current or given path into the current clipping region. It replaces any previous clipping region.

In the image below, the red outline represents a clipping region shaped like a star. Only those parts of the checkerboard pattern that are within the clipping region get drawn.

注意 : Be aware that the clipping region is only constructed from shapes added to the path. It doesn't work with shape primitives drawn directly to the canvas, such as fillRect() . Instead, you'd have to use rect() to add a rectangular shape to the path before calling clip() .

句法

void ctx.clip([fillRule]);
void ctx.clip(path [, fillRule]);
					

参数

fillRule

The algorithm by which to determine if a point is inside or outside the clipping region. Possible values:

• "nonzero" ： non-zero winding rule . Default rule.
• "evenodd" ： even-odd winding rule .

path

Path2D path to use as the clipping region.

范例

A simple clipping region

此范例使用 clip() method to create a clipping region according to the shape of a circular arc. Two rectangles are then drawn; only those parts within the clipping region are rendered.

HTML

<canvas id="canvas"></canvas>
					

JavaScript

The clipping region is a full circle, with its center at (100, 75), and a radius of 50.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();
// Draw stuff that gets clipped
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 100, 100);
					

结果

Specifying a path and a fillRule

This example saves two rectangles to a Path2D object, which is then made the current clipping region using the clip() 方法。 "evenodd" rule creates a hole where the clipping rectangles intersect; by default (with the "nonzero" rule), there would be no hole.

HTML

<canvas id="canvas"></canvas>
					

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create clipping path
let region = new Path2D();
region.rect(80, 10, 20, 130);
region.rect(40, 50, 100, 50);
ctx.clip(region, "evenodd");
// Draw stuff that gets clipped
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
					

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.clip' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
clip	Chrome Yes	Edge 12	Firefox 1.5	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
路径 参数	Chrome ?	Edge ≤18	Firefox 31	IE No	Opera ?	Safari 7	WebView Android ?	Chrome Android ?	Firefox Android 31	Opera Android ?	Safari iOS 8	Samsung Internet Android ?

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

另请参阅

• The interface defining this method: CanvasRenderingContext2D

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. CanvasRenderingContext2D
2. 特性

   1. canvas
   2. currentTransform
   3. direction
   4. fillStyle
   5. filter
   6. font
   7. globalAlpha
   8. globalCompositeOperation
   9. imageSmoothingEnabled
   10. imageSmoothingQuality
   11. lineCap
   12. lineDashOffset
   13. lineJoin
   14. lineWidth
   15. miterLimit
   16. shadowBlur
   17. shadowColor
   18. shadowOffsetX
   19. shadowOffsetY
   20. strokeStyle
   21. textAlign
   22. textBaseline
3. 方法

   1. addHitRegion()
   2. arc()
   3. arcTo()
   4. beginPath()
   5. bezierCurveTo()
   6. clearHitRegions()
   7. clearRect()
   8. clip()
   9. closePath()
   10. createImageData()
   11. createLinearGradient()
   12. createPattern()
   13. createRadialGradient()
   14. drawFocusIfNeeded()
   15. drawImage()
   16. drawWidgetAsOnScreen()
   17. drawWindow()
   18. ellipse()
   19. fill()
   20. fillRect()
   21. fillText()
   22. getImageData()
   23. getLineDash()
   24. getTransform()
   25. isPointInPath()
   26. isPointInStroke()
   27. lineTo()
   28. measureText()
   29. moveTo()
   30. putImageData()
   31. quadraticCurveTo()
   32. rect()
   33. removeHitRegion()
   34. resetTransform()
   35. restore()
   36. rotate()
   37. save()
   38. scale()
   39. scrollPathIntoView()
   40. setLineDash()
   41. setTransform()
   42. stroke()
   43. strokeRect()
   44. strokeText()
   45. transform()
   46. translate()