Question

是否可以创建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'))

这让我非常接近，但它似乎是一个黑客。这种方法有任何重大的不可预见的缺点吗？

更新

响应@kangax：我正在研究图形框架，我希望尽可能简化语法。我想避免使用@ctx.arc(), @ctx.lineStyle()，而只是将上下文子类化，然后能够使用@arc(), @shape()，等等。

更新2

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

Answer 1

不要尝试子类化或修改本机对象的原型，因为您最有可能最终与Web安全性发生冲突。

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

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

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

对CanvasRenderingContext2D进行子类化

1 个答案: