Question

是否有一种使函数需要CanvasRenderingContext2D对象作为父对象的方法？我想用它来创建其他CanvasRenderingContext2D函数，例如

CanvasRenderingContext2D.__proto__.strokeRoundedRect = ( x, y, width, height, cornerRadius ) => {

    // Code here...

}

编辑：

如果我运行let context = document.getElementById( "canvas" ).getContext( "2d" ); context.strokeRoundedRect( 0, 0, 0, 0, 0 );，系统会提示我此错误Uncaught TypeError: context.strokeRoundedRect is not a function

显然该功能不存在，那么有什么方法可以实现呢？

Answer 1

我很抱歉跳到提问。在发布此主题之前，我没有对问题进行彻底研究。

对于对此解决方案感兴趣的任何人，请阅读此评论。

我发现，通过使用document.getElementsByTagName( "canvas" )遍历所有画布的HTMLCollection，可以为每个单独的画布的CanvasRenderingContext2D分配所需的功能。我仍然不确定是否有更好的方法可以做到这一点，但是here is a JSFiddle及以下的版本中您会找到原始的JavaScript。

let xcd = {};

xcd.initialize = ( context ) => {

    context.strokeRoundedRect = ( x, y, width, height, cornerRadius ) => {

        console.log( "strokeRoundedRect:: ", "X: " + x, "Y: " + y, "Width: " + width, "Height: " + height, "Corner radius: " + cornerRadius );

    }

    context.fillRoundedRect = ( x, y, width, height, cornerRadius ) => {

        console.log( "fillRoundedRect:: ", "X: " + x, "Y: " + y, "Width: " + width, "Height: " + height, "Corner radius: " + cornerRadius );

    }

}

// Get HTMLCollection of all canvases
let canvases = document.getElementsByTagName( "canvas" );

for( let i = 0; i < canvases.length; i++)

    xcd.initialize( canvases[ i ].getContext( "2d" ) );

需要CanvasRenderingContext2D作为父对象才能起作用

1 个答案: