Требовать CanvasRenderingContext2D в качестве родительского объекта для функции - PullRequest
Новая
       10

Требовать CanvasRenderingContext2D в качестве родительского объекта для функции

0 голосов
/ 15 ноября 2018

Есть ли способ заставить функцию требовать объект CanvasRenderingContext2D в качестве родительского объекта? Я хотел бы использовать это для создания дополнительных функций CanvasRenderingContext2D, например, 

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

    // Code here...

}

Edit:

Если я запускаю let context = document.getElementById( "canvas" ).getContext( "2d" ); context.strokeRoundedRect( 0, 0, 0, 0, 0 );, мне выдается сообщение об ошибке Uncaught TypeError: context.strokeRoundedRect is not a function

Очевидно, что функция не существует, так есть ли способ реализовать это?

1 Ответ

0 голосов
/ 15 ноября 2018

Я хотел бы извиниться за то, что перешел на вопрос.Я не исследовал проблему до того, как опубликовать эту тему.

Для тех, кто заинтересован в решении этой проблемы, прочитайте этот комментарий.

Я обнаружил, что итерация по HTMLCollection всех холстов, требуемый с помощью document.getElementsByTagName( "canvas" ), можно назначить нужные функции для CanvasRenderingContext2D каждого отдельного холста.Я все еще не уверен, есть ли лучший способ сделать это, но здесь есть 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" ) );
...