个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
考虑以下网页。
<html>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid #000000;">
</canvas>
</body>
</html>
我在 Firefox 中打开此页面，打开 JS 控制台并键入以下内容。
> document.getElementById("canvas").getContext("2d")
输出如下:
CanvasRenderingContext2D { canvas: canvas#canvas, mozCurrentTransform: (6) […], mozCurrentTransformInverse: (6) […], mozTextStyle: "10px sans-serif", mozImageSmoothingEnabled: true, globalAlpha: 1, globalCompositeOperation: "source-over", strokeStyle: "#000000", fillStyle: "#000000", filter: "none" }
另一方面，如果我自己创建一个对象并复制 CanvasRenderingContext2D 的所有内容，它仍然只是一个普通对象。
var realContext = document.getElementById("canvas").getContext("2d")
var myContext = new Object()
for (var property in realContext) {
myContext[property] = realContext[property];
}
myContext
Object { drawImage: drawImage(), beginPath: beginPath(), fill: fill(), stroke: stroke(), clip: clip(), isPointInPath: isPointInPath(), isPointInStroke: isPointInStroke(), createLinearGradient: createLinearGradient(), createRadialGradient: createRadialGradient(), createPattern: createPattern(), … }
是什么让 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？
作为推论，我怎样才能将我的普通旧对象变成CanvasRenderingContext2D？
编辑:我不关心 JS 控制台说的是什么。我很在意我不能像使用原始上下文一样使用新上下文。
myContext.save()
TypeError: 'save' called on an object that does not implement interface CanvasRenderingContext2D
目标是能够像使用旧对象一样使用新对象并在原始 Canvas 上绘图。
编辑:我一直在寻找不需要使用 Canvas 修改网站源代码的解决方案。
最佳答案
这是一个片段，它将开始记录对任何 CanvasRenderingContext2D 的所有访问。我禁用了堆栈代码段控制台，因为它会在尝试序列化 console.log() 输出时抛出一些错误，因此只需使用 F12 检查开发人员控制台的输出即可。
function intercept(value) {
switch (typeof value) {
case 'function':
case 'object':
return new Proxy(value, {
get(target, key) {
const value = Reflect.get(target, key);
console.log('handler.get', target, key, value);
return intercept(value);
},
set(target, key, value) {
const result = Reflect.set(target, key, value);
console.log('handler.set', target, key, value);
return result;
},
apply(target, thisArg, args) {
const value = Reflect.apply(target, thisArg, args);
console.log('handler.apply', thisArg, target, ...args, value);
return intercept(value);
}
});
default:
return value;
}
}
const ownPropertyDescriptorEntries = Object.entries(
Object.getOwnPropertyDescriptors(
CanvasRenderingContext2D.prototype
)
);
const interceptedPropertyDescriptorEntries = ownPropertyDescriptorEntries.map(
([key, { get, set, value, ...descriptor }]) => [
key, get || set ? {
...descriptor,
get() {
console.log('descriptor.get', this, key);
return intercept(Reflect.apply(get, this, []));
},
set(value) {
console.log('descriptor.set', this, key, value);
return intercept(Reflect.apply(set, this, [value]));
}
} : {
...descriptor,
value: intercept(value)
}
]
);
Object.defineProperties(
CanvasRenderingContext2D.prototype,
Object.fromEntries(
interceptedPropertyDescriptorEntries
)
);
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
console.log(context.lineWidth);
context.fillStyle = 'red';
context.getImageData(0, 0, 100, 100).data[0] = 255;<canvas></canvas>descriptor.get CanvasRenderingContext2D lineWidth
1
descriptor.set CanvasRenderingContext2D fillStyle red
handler.apply CanvasRenderingContext2D ƒ getImageData() { [native code] } 0 0 100 100 ImageData
handler.get ImageData data Uint8ClampedArray(40000)
handler.set Uint8ClampedArray(40000) 0 255
关于javascript - 什么使 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52303490/
26
4
0
我正在学习 Go，但我无法在任何地方找到这个答案。 Web开发中的文件扩展名是否有任何官方标准？我见过多种约定，例如 .tmpl 和 .gtpl，这是什么？谢谢。 最佳答案 没有固定的标准，但有一些相
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 8 年前关闭。 Improve
假设我有两个类(class) Widget ^ | Window 我还有另一个类应用程序: 定义如下 class Application { public: ... private:
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我多年来一直在使用 MySQL，直到去年左右，主要是在较小的项目上。我不确定是语言的性质还是我缺乏真正的教程让我不确定我正在写的东西是否是优化目的和扩展目的的正确方法。 虽然自学 PHP，但我对自己和
我已经多次读到 EJB 是重量级的……但昨晚我正在浏览关于 EJB 的 Java EE 6 教程，它们似乎只是普通的 Java 对象，除了它们可以有像 Stateless 或 Singletons 这
如何使此 SimpleModal 脚本在页面加载时加载而不是单击按钮？谢谢=) Demo 基本模态对话框 对于此演示，SimpleModal 使用此“隐藏”数据作为其内容。您还可以使用标准 HTML
这是 Haskell 中的代码: class Fooable a where foo :: a -> a instance Fooable (a, a) where foo = ...
是否有推荐的方法来测试 Actor 是否使用 be 正确改变了其行为？我更喜欢使用 FSM 的原因之一是因为我可以轻松验证 Actor 是否已更改其行为。我不知道在使用 become/unbecome
我正在构建一个位于“php my admin”中的表，我是在第一次点击其中一个“th”它的 asc 时这样做的，现在我试图在第二次点击时制作 desc ..有什么想法吗？ 阿姆..很多我不记得了抱歉.
考虑以下网页。 我在 Firefox 中打开此页面，打开 JS 控制台并键入以下内容。 > document.getElementById(
如何让自己成为 postgresql 的 super 用户？ 我一直在尝试创建数据库，但我不断收到以下错误: createdb: database creation failed: ERROR: pe
Query没有太大帮助。 如前所述here , PostgreSQL 是 ORDBMS。 here ，它解释了 PostgreSQL 是 RDBMS。 PostgreSQL 是一个 ORDBMS 是什
我已经看到，当在导航元素中使用的链接中垂直/水平居中文本时，将链接设置为 flex 容器会很有用。我没有意识到链接文本实际上可以是一个(单个) flex 元素。我可以看到链接中的 span 元素可以是
我见过很多说明如何找到给定集合的子集的示例，但是您如何将一个集合设为另一个集合的子集？所以集合 B 是集合 A 的子集，这将如何实现？我目前正在使用递归性质的方案，但是这本书只展示了如何列出子集而不是
有些程序会根据其标准输出是否为 tty 来更改其输出。因此，如果您将它们放入管道或重定向它们，输出将与您的 shell 中的不同。这是一个例子: $ touch a b c # when runnin
我正处于项目的开始阶段，到目前为止我一直在使用默认的 MySQL 数据库。 对了，默认的数据库有名字吗？ 我的问题是如何在不删除当前表和创建新表的情况下将现有表更改为 utf-8 和 InnoDB。是
我正在尝试编写一个过滤器来包装数据以遵循 JSON API spec到目前为止，它适用于我直接返回 ActionResult 的所有情况，例如 ComplexTypeJSON。我试图让它在像 Comp
我在 Storyboard 上创建了一个带有一个 UITextField 的自定义 UIViewController。在 viewDidLoad 上，我将 UITextFIeld 设置为 become
我已经看到关于 valueless_by_exception 方法的 cppreference 的以下注释: A variant may become valueless in the followi
我是一名优秀的程序员,十分优秀！