Javascript 如何从html CanvasGradient和CanvasPattern对象提取属性

给定：html画布上下文：

示例代码：

此代码在梯度变量中创建一个

CanvasGradient

对象

var gradient=context.createLinearGradient(0,0,300,150);
gradient.addColorStop(0, 'red');   
gradient.addColorStop(1, 'white');

var gradient=context.createRadialGradient(150,150,30, 150,150,100);
gradient.addColorStop(0, 'red');   
gradient.addColorStop(1, 'white');

var pattern=context.createPattern(myImage,'repeat');

此代码在梯度变量中创建一个

CanvasGradient

对象

var gradient=context.createLinearGradient(0,0,300,150);
gradient.addColorStop(0, 'red');   
gradient.addColorStop(1, 'white');

var gradient=context.createRadialGradient(150,150,30, 150,150,100);
gradient.addColorStop(0, 'red');   
gradient.addColorStop(1, 'white');

var pattern=context.createPattern(myImage,'repeat');

此代码在模式变量中创建一个

CanvasPattern

对象

var gradient=context.createLinearGradient(0,0,300,150);
gradient.addColorStop(0, 'red');   
gradient.addColorStop(1, 'white');

var gradient=context.createRadialGradient(150,150,30, 150,150,100);
gradient.addColorStop(0, 'red');   
gradient.addColorStop(1, 'white');

var pattern=context.createPattern(myImage,'repeat');

是否有一种编程方法可以在创建这些对象后从中提取属性（而不是通过引用创建它们的JS代码）？

通缉：

• 线性渐变线段（0,0300150）及其色块（0，红色，1，白色）

• 径向渐变圆（150150,30150100）及其色块（0，红色，1，白色）

• 图案具有图像和重复属性

---

谢谢你的任何想法

画布规格不允许访问内部渐变或图案属性，就像您也知道的，无法访问变换矩阵一样。
因此，唯一的解决方案是注入CanvasRenderingContext2D、CanvasGradient和CanvasPattern原型，以便在创建的对象中存储用于创建它们的值

因此，对于画布，您可以编写如下内容：

// save native linear gradient function
var nativeCreateLinearGradient = CanvasRenderingContext2D.prototype.createLinearGradient ;

// redefine createLinearGradient with a function that stores creation data
// new properties : gradientType, x0, y0, x1, y1, colorStops
CanvasRenderingContext2D.prototype.createLinearGradient = function(x0, y0, x1, y1) {
      // actually create the gradient
      var newGradient = nativeCreateLinearGradient.apply(this,arguments);
      // store creation data
      newGradient.gradientType = 0 ; // 0 for linear, 1 for radial
      newGradient.x0 = x0;         newGradient.y0 = y0;
      newGradient.x1 = x1;         newGradient.y1 = y1;
      newGradient.colorStops = [];
      return newGradient;
};

对于梯度：

var dummyContext = document.createElement('canvas').getContext('2d');    

var nativeAddColorStop = CanvasGradient.prototype.addColorStop;

CanvasGradient.prototype.addColorStop = function (offset, color) {
      // evaluate offset (to avoid reference issues)
      offset = +offset;
      // evaluate color (to avoid reference issues)
      dummyContext.fillStyle = color;
      color = dummyContext.fillStyle ;
      // store color stop 
      this.colorStops.push([offset, color]);
      // build the real gradient
      nativeAddColorStop.call(this, offset, color);  
      return this;     
};

---

对于径向渐变，您可以采用非常类似的方式来执行此操作，对于图案，您可能希望复制图像，其类型为）

+1感谢@gamealchest！我现在正在使用类似的解决方法，但我希望有人“越狱”了CanvasGradient和CanvasPattern对象。