如何解决扩展或包装canvas.getContext接收的对象
是否可以使用接收到的上下文的原型获取对象?
let webgl = canvas.getContext('webgl2',params) || canvas.getContext('webgl',params) || canvas.getContext('experimental-webgl',params);
let myObj1 = Object.create(webgl)
let myObj2 = {
__proto__ : webgl,myMethod(){}
}
在引用标准上下文方法时,这些方法的这些和其他变体会出现非法调用错误。
解决方法
我不确定您要做什么。
有很多包装原型的例子
示例:https://stackoverflow.com/search?q=WebGLRenderingContext.prototype. *
https://stackoverflow.com/search?q=HTMLCanvasElement.prototype. *
Here's one that tries to catch various WebGL issues
我不确定您捕获illegal invocation
错误的含义。
如果要直接包装函数而不是原型,请
const gl = document.querySelector('canvas').getContext('webgl');
gl.clearColor = function(origFn) {
return function(...args) {
console.log(`clear(${args.join(',')})`);
origFn.call(this,...args);
};
}(gl.clearColor);
gl.clearColor(0.2,0.5,0.7,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
<canvas></canvas>
这也是包装整个对象的一个例子
const foo = {};
const gl = document.querySelector('canvas').getContext('webgl');
for (let key in gl) {
const value = gl[key];
if (typeof value === 'function') {
wrapFunction(gl,key,foo);
} else {
wrapProperty(gl,foo);
}
}
function wrapFunction(gl,wrapper) {
const origFn = gl[key];
wrapper[key] = function(...args) {
return origFn.call(gl,...args);
};
}
function wrapProperty(gl,wrapper) {
wrapper.__defineGetter__(key,function() {
return gl[key];
});
wrapper.__defineSetter__(key,function(value) {
gl[key] = value;
});
}
foo.clearColor(1,1); // orange
foo.clear(foo.COLOR_BUFFER_BIT);
<canvas></canvas>
示例: https://github.com/KhronosGroup/WebGLDeveloperTools/blob/master/src/debug/webgl-debug.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。