子类化 CanvasRenderingContext2D答案

【问题标题】：Subclassing CanvasRenderingContext2D子类化 CanvasRenderingContext2D
【发布时间】：2013-12-24 11:40:28
【问题描述】：

是否可以创建 CanvasRenderingContext2D 的子类并将其实例分配为 Canvas 元素的上下文？

我希望能够做类似的事情：

class ContextSub extends CanvasRenderingContext2D
    shape : (pointList, solid = true, closed=true) =>
        @beginPath()
        @lineTo p[0], p[1] for p in pointList
        if closed
             @closePath()
             if solid then @fill() else @stroke()
        else
            if solid then @fill() else @stroke()
            @closePath()

然后：

canvas = document.getElementById "canvas"
canvas.setContext new ContextSub()

目前，我正在处理这样的问题：

class MyContext 
    constructor : (ctx) ->
        for key of ctx
            @[key] = ctx[key]

canvas = document.getElementById "canvas"
myContext = new MyContext(canvas.getContext('2d'))

这让我非常接近，但它似乎是一个 hack。这种方法有什么不可预见的重大缺陷吗？

更新

回复@kangax：我正在开发一个图形框架，我希望尽可能保持语法简洁。我想避免使用@ctx.arc(), @ctx.lineStyle()，而只是子类化上下文，然后能够使用@arc(), @shape()，等等。

更新 2

我做了更多的挖掘，这似乎是不可能的。我注意到上下文对象有一个名为 canvas 的属性，因此我尝试扩展上下文，然后将该属性设置为 html 中定义的画布。这似乎可行，因为没有引发任何错误，但调用超类的任何方法都会导致 Illegal Invocation 错误。同样，使用上面的 hack 方法也会导致相同的错误。显然，这不是 CanvasRenderingContext2D 的预期用例！

【问题讨论】：

你能解释一下为什么需要这个吗？

标签： javascript html coffeescript html5-canvas

【解决方案1】：

不要尝试子类化或修改原生对象的原型，因为您很可能最终会与网络安全发生冲突。

相反，如果您想构建自己的框架来透明地处理 CanvasRenderingContext2D，请使用代理对象之类的东西：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

（警告：ECMAScript6 功能，但可以用手写的 JavaScript 模拟）

【讨论】：