Question

所以我总是在写出

时变得非常懒惰

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

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

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

Answer 2

更好的代码：

for (var p in _ctx) {
  if (!CanvasChainer.prototype[p] && typeof _ctx[p] === 'function') {
      CanvasChainer.prototype[p] = function (p) {
        return function () {
          return this.ctx[p].apply(this.ctx, arguments) || this;
        };
      }(p);
   }
 }

创建画布链lib

2 个答案: