HTML5 Canvas：在調整大小時設置上下文

Question

我有一個使用HTML5 Canvas（createjs）的項目，但文本筆觸出現尖峰問題，這意味着我必須設置2d上下文的下限。 但是，父窗口（我無法控制）在調整窗口大小時縮放畫布，這顯然會重置畫布上下文。

現在，我想避免在客戶端中放置onresize事件-我的第一個想法就是使用createjs Ticker：

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
    var ctx = canvas.getContext('2d');
    ctx.miterLimit = 2;
}

盡管這似乎有些浪費，但是有沒有使用DOM事件的更有效方法呢？

Answer 1

您的方法可能有效，但是絕對可以避免，因為您不能期望上下文屬性會被保留，或者它們不會在錯誤的位置應用。

如果確實要修補顯示列表以更新上下文，則可以使用“ drawstart”事件，該事件在繪制顯示列表之前觸發：

stage.on("drawstart", function(e) {
    var ctx = stage.canvas.getContext("2d");
    ctx.miterLimit = 2;
});

但是，如果您想要一種更好的特定於實例的方法，則可以擴展Text類以附加所需的任何上下文屬性。 這是一個簡單的示例，其中只要繪制文本，就會存儲並應用miterLimit 。 在此示例中，您可以創建多個實例並為其設置不同的斜接限制。 請注意，您可能還希望支持其他屬性，例如lineJoin。

http://jsfiddle.net/cr4hmgqp/2/

(function() {
    "use strict"
  function MiterText(text, font, color, miterLimit) {
    this.Text_constructor(text,font,color);
    this.miterLimit = miterLimit;
  };
  var p = createjs.extend(MiterText, createjs.Text);
  p.draw = function(ctx, ignoreCache) {
    ctx.miterLimit = this.miterLimit;
    if (this.Text_draw(ctx, ignoreCache)) { return true; }
    return true;
  };
  p.clone = function() {
        return this._cloneProps(new MiterText(this.text, this.font, this.color, this.miterLimit));
    };
  createjs.MiterText = createjs.promote(MiterText, "Text");
}());

請注意，希望在下一版本的EaselJS中解決此問題。 這是跟蹤的問題： https : //github.com/CreateJS/EaselJS/issues/781

干杯。