在此页

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

CanvasRenderingContext2D .createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition. This method returns a CanvasPattern .

This method doesn't draw anything to the canvas directly. The pattern it creates must be assigned to the CanvasRenderingContext2D.fillStyle or CanvasRenderingContext2D.strokeStyle properties, after which it is applied to any subsequent drawing.

句法

CanvasPattern ctx.createPattern(image, repetition);
					

参数

image

CanvasImageSource to be used as the pattern's image. It can be any of the following:

• HTMLImageElement ( <img> )
• SVGImageElement ( <image> )
• HTMLVideoElement ( <video> , by using the capture of the video)
• HTMLCanvasElement ( <canvas> )
• ImageBitmap
• OffscreenCanvas

repetition

DOMString indicating how to repeat the pattern's image. Possible values are:

• "repeat" (both directions)
• "repeat-x" (horizontal only)
• "repeat-y" (vertical only)
• "no-repeat" (neither direction)

若 repetition is specified as an empty string ( "" ) 或 null (but not undefined ), a value of "repeat" 会被使用。

返回值

CanvasPattern

An opaque object describing a pattern.

范例

Creating a pattern from an image

此范例使用 createPattern() method to create a CanvasPattern with a repeating source image. Once created, the pattern is assigned to the canvas context's fill style and applied to a rectangle.

The original image looks like this:

HTML

<canvas id="canvas" width="300" height="300"></canvas>
					

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 300, 300);
};
					

Creating a pattern from a canvas

In this example we create a pattern from the contents of an offscreen canvas. We then apply it to the fill style of our primary canvas, and fill that canvas with the pattern.

JavaScript

// Create a pattern, offscreen
const patternCanvas = document.createElement('canvas');
const patternContext = patternCanvas.getContext('2d');
// Give the pattern a width and height of 50
patternCanvas.width = 50;
patternCanvas.height = 50;
// Give the pattern a background color and draw an arc
patternContext.fillStyle = '#fec';
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
patternContext.arc(0, 0, 50, 0, .5 * Math.PI);
patternContext.stroke();
// Create our primary canvas and fill it with the pattern
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const pattern = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add our primary canvas to the webpage
document.body.appendChild(canvas);
					

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.createPattern' 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
createPattern	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

图例

完整支持

完整支持

Gecko-specific notes

• Starting with Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), specifying a null or undefined image correctly throws a TYPE_MISMATCH_ERR 异常。
• Starting with Gecko 16.0 (Firefox 16.0 / Thunderbird 16.0 / SeaMonkey 2.13), specifying null 为 repetition parameter is now allowed and results in the repetition being set to "repeat" ( bug 762657 ).

另请参阅

• The interface defining this method: CanvasRenderingContext2D
• CanvasPattern

元数据

• 最后修改： Aug 27, 2019

相关话题

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()