如何获取 canvas-context (2D) 的当前模式对象内容？

Question

（使用 Firefox32 和 Win7。但在其他浏览器中我也需要它才能工作。）

我找不到命令来检索我在 2D 上下文中设置的图案对象的内容。

没有直接获取值数组和宽高的方法吗？

如果真的没有直接的方法，是否有解决方法？

我可以将 fillRect 与隐藏 canvas 上的图案一起使用，然后读出 canvas。但是，如何获得正确的高度和宽度呢？

Answer 1

如果您想要的图案当前用作填充样式，那么您可以通过获取填充样式来获取它：

myPattern=context.fillStyle;

否则您无法获取您的模式对象，因为上下文将您创建的任何模式对象保留为私有属性。

因此，通常您会保留对模式的引用，直到不再需要它为止。

如果您还需要用于创建图案的原始 imageObject，那么您通常也会保存对该图像的引用。

// create an imageObject for use in your pattern
var myImageObject=new Image();
myImageObject.onload=start;      // call start() when myImageObject is fully loaded
myImageObject.src="";

function start(){

    // myImageObject has now been fully loaded so
    // create your pattern and keep a reference to it
    var myPattern = context.createPattern(myImageObject, 'repeat');

}

... and later when you need the pattern ...

// use your pattern object reference to apply the pattern as a fillStyle
context.fillStyle = myPattern;

... and later if you need the original image object

// get the original image object's size
var imgWidth=myImageObject.width;
var imgHeight=myImageObject.height;

// draw the original image object to the context -- or whatever you need it for
context.drawImage(myImageObject,50,50);

Answer 2

模式属性

在 CanvasPattern 对象上公开的唯一方法是处理转换：

interface CanvasPattern {
  // opaque object
  void setTransform(SVGMatrix transform);
};

这意味着必须在外部跟踪所有其他属性。

解决方法 1 - 手动跟踪属性

解决方法是从您用于图案的图像读取宽度和高度，以及模式和可选的变换。

仅保留对它们的引用以备后用：

var img = ...;                                      // image source
var patternMode = "repeat";                         // store repeat mode
var patternWidth = img.naturalWidth;                // width and height of image
var patternHeight = img.naturalHeight;              // = width and height of pattern

var pattern = ctx.createPattern(img, patternMode);  // use to create pattern

解决方法 2 - 创建自定义对象

您可以创建一个自定义对象，它包含模式创建过程并公开可以保存宽度、高度等的方法。

例子

对象可能如下所示：

function PatternExt(ctx, image, mode) {

    var ptn = ctx.createPattern(image, mode || "repeat");

    this.setTransform = ptn.setTransform ? ptn.setTransform.bind(ptn) : null;
    this.width = image.naturalWidth;
    this.height = image.naturalHeight;
    this.image = image;
    this.mode = mode;
    this.pattern = ptn;
}

然后只需创建一个实例，方法几乎与 createPattern():

相同

var p = new PatternExt(ctx, img, "repeat");
ctx.fillStyle = p.pattern;

要阅读信息，请执行以下操作：

var w = p.width;
var h = p.height;
...

Rename/extend 就像你 want/need.

自定义对象演示

// load an image for pattern
var img = new Image();
img.onload = demo;
img.src = "http://i.imgur.com/HF5eJZS.gif";

function demo() {
    var ctx = document.querySelector("canvas").getContext("2d"), p;

    // create a pattern instance
    p = new PatternExt(ctx, img, "repeat");
    
    // use as fill-style
    ctx.fillStyle = p.pattern;                  
    ctx.fillRect(0, 0, 300, 150);

    // show some properties
    ctx.font = "24px sans-serif";
    ctx.fillStyle = "#fff";
    ctx.fillText([p.width, p.height, p.mode].join(), 10, 30);
}

function PatternExt(ctx, image, mode) {
    var ptn = ctx.createPattern(image, mode || "repeat");
    this.setTransform = ptn.setTransform ? ptn.setTransform.bind(ptn) : null;
    this.width = image.naturalWidth;
    this.height = image.naturalHeight;
    this.image = image;
    this.mode = mode;
    this.pattern = ptn;
}

<canvas></canvas>

如何获取 canvas-context (2D) 的当前模式对象内容？

How to get the current pattern-object contents of a canvas-context (2D)?

javascript

canvas

html5-canvas

2d

模式属性

解决方法 1 - 手动跟踪属性

解决方法 2 - 创建自定义对象

例子

自定义对象演示