如何获取画布上下文（2D）的当前模式对象内容？

Question

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

我无法找到一个命令来检索我在2D上下文中设置的模式对象的内容。

是否没有直接的方法来获取值数组以及宽度和高度？

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

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

Answer 1

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

myPattern=context.fillStyle;

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

通常情况下，您需要保留对模式的引用，直到不再需要它为止。

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

// 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;
...

根据需要重命名/扩展。

自定义对象的演示

＆＃13;

＆＃13;

// 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;
}

＆＃13;

<canvas></canvas>

＆＃13;

＆＃13;

＆＃13;