javascript - 创建 Canvas 链库

Question

所以我真的很懒惰，总是写出来

ctx.moveTo(x, y); 
ctx.lineTo(x1, y1);
ctx....

用于多行 Canvas 代码。相反，我创建了一个可链接的包装器来处理所有这些东西，尽管是以一种不太动态的方式:

function CanvasChainer(ctx) {
  this.ctx = ctx;
}

// just a small snippet
CanvasChainer.prototype = {
  beginPath: function () {
    this.ctx.beginPath();
    return this;
  },
  closePath: function () {
    this.ctx.closePath();
    return this;
  },
  fillText: function (str, x, y) {
    this.ctx.fillText(str, x, y);
    return this;
  },
  moveTo: function (x, y) {
    this.ctx.moveTo(x, y);
    return this;
  }
}

当我尝试以编程方式附加所有内容时，当我尝试使用 apply 或 call 时，我不断收到此错误:

Illegal operation on WrappedNative prototype object
this.ctx[i].apply(this.ctx[i], args); 

和代码:

var _canvas = document.createElement('canvas'),
  SLICE = Array.prototype.slice,
  _ctx;

if (_canvas.attachEvent && window.G_vmlCanvasManager) {
  G_vmlCanvasManager.initElement( _canvas );
}

_ctx = _canvas.getContext('2d');

function CanvasChainer(ctx) {
  this.ctx = ctx;
}

CanvasChainer.prototype = { };

for (var p in _ctx) {
  if (!CanvasChainer.prototype[p] && typeof _ctx[p] === 'function') {
    (function (i) {
      CanvasChainer.prototype[i] = function () {
        if (arguments.length > 0) {
          var args = SLICE.call(arguments, 0);
          this.ctx[i].apply(this.ctx[i], args);
        }
        return this;
      }
    }(p))
   }
 }

此实现在不需要参数时有效(即 ctx.beginPath())。我也只关心附加可用功能。

Answer 1

你不应该在 HTMLRenderingContext 的上下文中调用方法吗？

替换:

this.ctx[i].apply(this.ctx[i], args); 

与:

this.ctx[i].apply(this.ctx, args);