问题标签 [html5-canvas]

我试图将一个简单的 HTML 文件加载到画布中（浏览器 = ff 3.66）。

我怎样才能解决这个问题？

我想将以下事件管理从键码替换为鼠标。我该怎么做呢？

目前支持的浏览器 = FF 3.6x。

是否可以canvas.toDataURL()在 Adob​​e AIR 中使用？

当我尝试时，出现以下错误：

错误： SECURITY_ERR：DOM 异常 18

我正在使用 HTML5 画布对象创建一个简单的 3D 引擎。它运行良好，但我想实现红/蓝立体图处理，这样人们就可以使用红/蓝眼镜真正看到 3D。目前，我将 3D 对象渲染了两次，第二次是从靠近第一个相机位置的相机位置渲染的。

我面临的问题是如何将渲染的两个对象组合成具有正确颜色的浮雕。现在我使用 globalAlpha=0.5 并将第一个渲染为红色，第二个渲染为蓝色。然而，这并不完全有效，因为仅受红色对象影响的像素应该保持红色，但它们正在变成黑色和红色之间的颜色，因为我的背景颜色是黑色。

在查看 3D 立体图创建应用程序时，我注意到红色和蓝色像素一起计算如下：

然而，HTML5 画布使用 alpha 计算所有像素，因此如果背景颜色为黑色，则红色像素变为深红色，而应保持红色。基本上我需要红色对象的像素只影响每个像素的红色分量，而蓝色对象的像素只影响每个像素的蓝色分量。

我可以在每个像素的基础上工作，但这是否可行并且不会破坏性能？我每秒渲染 20 帧，所以我想它没有任何实际用途。任何建议，将不胜感激。

我希望这张图片能澄清整体：

我正在尝试在画布上制作我的第一个图像动画。我希望图像旋转，但我的代码中有一些不正确的地方。有任何想法吗？这一切都在一个 jquery 文档中准备好了：

在我正在研究的 3D 引擎中，我成功地绘制了 3D 立方体。就我而言，填充侧面的唯一方法是使用纯色或渐变。为了让事情变得更令人兴奋，我真的很想使用一个简单的位图来实现纹理映射。

关键是我几乎找不到任何关于 JavaScript 图像处理主题的文章或代码示例。此外，HTML5 画布中的图像支持似乎仅限于裁剪。

我该如何拉伸位图，以便矩形位图可以填充不规则的立方体面？在 2D 中，由于透视的原因，投影的方形立方体面不是方形的，所以我必须拉伸它以使其适合任何四边形。

希望这张图片能澄清我的观点。左脸现在填充了白色/黑色渐变。纹理映射后，如何用位图填充它？

有人对使用 JavaScript 和 HTML5 Canvas 的透视纹理映射（或图像处理）有任何提示吗？

编辑：我得到它的工作，感谢 6502！

然而，它是相当 CPU 密集型的，所以我很想听听任何优化想法。

使用 6502 技术的结果-使用的纹理图像

介绍

我目前正在开发一个类似于 MugTug 的Sketchpad的小型绘图应用程序。不过，有一个非常烦人的问题我还没有解决。

绘图算法

我的基本绘制算法类似于 MugTug 使用的算法。基本上它只是在用户绘图时使用 drawImage 标记图像。有一个严重的障碍。该算法开始以低 alpha 失败。

您可以通过以下方式在 MugTug 的工具中轻松看到这一点：直径 -> 100，硬度 -> 1，流量 -> 100，不透明度 -> 2（1 太小！应用程序中的错误？）。

有两个主要问题： 1. 可见条带。2.颜色变化（给不同的颜色去看看它是如何工作的......）

问题

这个问题可能与颜色精度有关吗？在我看来，Canvas API 使用 8 位通道（即 0-255）处理颜色。有没有办法绕过这个限制？如果可能的话，我更喜欢使用纯浮点颜色（0.0-1.0）。

欢迎任何有关如何处理此问题的想法。如果颜色确实仅限于 8 位通道，我想我不走运......

使用 Raphael JavaScript 库时如何找到纸张/画布的绝对位置？

例如，假设最小的工作示例如下：

如何在不知道它所在的 div 的 ID 的情况下从页面顶部找到纸张的绝对 x 和 y 坐标？（在示例中，我可以知道，但我的实际情况使得知道 div ID 变得更加复杂。）

我目前正在编写一个小绘图应用程序，该应用程序需要访问其涂抹和模糊工具的像素数据，并且在 Firefox 中遇到了 HTML5 Canvas API 的一个令人讨厌的问题。显然，它并没有完全按照规范中的定义实现 getImageData。该规范特别指出“......画布外的像素必须返回为透明黑色......”。

这在 FF 中不会发生（在 FF 3.6 和 4 beta 9 中测试）。相反，它会给出这样的错误：指定了无效或非法的字符串”代码：“12

请注意，这似乎可以在 Chrome 中正常工作。

我想这意味着我将不得不实现一些额外的代码来解决这个限制。我设法使用以下代码绕过了这个问题：

这并不酷，因为我将一堆空像素返回给调用者。就像在规范中一样返回结果会更好。

只是为了澄清代码是 Context API 的一部分，它包装了真实的上下文并提供了一些额外的功能（相对坐标等）。这可能解释了 this.width 等内容的来源。

麻烦的是XXX部分。我只需要某种方法来返回符合规范的 ImageData。欢迎任何关于如何做到这一点的想法。:)

关于我之前的一个问题，我尝试了 Chromium 对webkitRequestAnimationFrame. 虽然它有很多优点，但对我来说，它比使用普通setInterval/setTimeout生成动画要糟糕得多。

我尝试了http://paulirish.com/2011/requestanimationframe-for-smart-animating/上所述的示例，包括 withwebkitRequestAnimationFrame和 with setTimeout：

1. webkitRequestAnimationFrame：http: //jsfiddle.net/hnQYt/
2. setTimeout：http: //jsfiddle.net/hnQYt/2/

我是唯一一个对第一种方法的流畅性有问题的人吗？如果不是，这个专门设计的方法怎么会惨败？