HTML5 Canvas：在调整大小时设置上下文答案

【问题标题】：HTML5 Canvas: Setting context on resizeHTML5 Canvas：在调整大小时设置上下文
【发布时间】：2017-07-18 17:46:20
【问题描述】：

我有一个使用 HTML5 Canvas (createjs) 的项目，我遇到了文本笔划尖峰问题，这意味着我必须设置 2d 上下文的斜接限制。但是，父级（我无法控制）在调整窗口大小时缩放画布，这显然会重置画布上下文。

现在，我想避免在客户端中放置 onresize 事件 - 我的第一个想法就是这样使用 createjs Ticker：

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

虽然这看起来有点浪费，但有没有更有效的方法来做到这一点，而不使用 DOM 事件？

【问题讨论】：

绑定到resize 是适当且直接的。如果您的画布内容是静态的，只需创建第二个内存画布并将静态内容保存到第二个画布上。在调整大小时，drawImage 将第二个画布放到第一个画布上——可选缩放。如果您的内容不是静态的，则必须使用绘图命令重新渲染内容或使用第二个画布创意。不要在不断触发的“tick”处理程序中重绘，因为如果自上次滴答以来内容没有改变，您可能会不必要地重绘。

标签： javascript html html5-canvas createjs

【解决方案1】：

您的方法可能有效，但它绝对是一个 hack，因为您不能期望上下文属性会被维护，或者它们不会被应用到错误的地方。

如果您确实想修补显示列表以更新上下文，您可以使用“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

干杯。

【讨论】：