问题标签 [html5-canvas]

我正在做一个极简图像创建项目，我需要能够在浏览器中创建图像，然后在服务器上使用这些图像。到目前为止，该Canvas.toDataUrl()方法已经满足了我们的需求，但我只是学习了Canvas.toBlob()一种更方便的方法。

几个月前，该方法似乎toBlob()对规范来说是新的（我找不到任何直接引用它何时添加的内容。）

哪些浏览器支持toBlob，更重要的是这些浏览器的哪些版本包含该方法的集成？此外，是否支持此功能“错误”或正在开发任何主要浏览器？

更新

大约 8 年前，我问过这个问题。我已经提交了我之前提到的项目，等待canvas.toBlob()方法状态的任何更新。从我在网络上收集到的信息toBlob()来看，一些浏览器的实现似乎正在逐渐普及。

我再次问，在canvas.toBlob()已经开始集成 HTML5 画布对象的浏览器中，这种方法有多普遍？这些浏览器的哪些版本最先集成了这种支持？

我正在做一个极简图像创建项目，我需要能够在浏览器中创建上传并在服务器上使用的图像。

我已经设法通过在我的画布对象上调用 toDataUrl() 方法为服务器创建图像数据。具体来说，我通过调用 toDataUrl('image/gif') 创建图像，但生成的图像未经过 RLE 压缩。有没有办法强制 toDataUrl 方法创建压缩的 GIF？

我目前正在开发一个将使用 HTML5 的 canvas 元素运行的应用程序。我有代码正在调整 Canvas 的大小以适应窗口的大小，因为它的大小调整如下：

但是，我希望我的画布从一开始就完全调整大小，而不仅仅是在有人调整屏幕大小时。出于某种原因，当我复制上面的代码时，除非我更改$(window).resize为$(window).loador $(document).ready，否则画布不会设置为开始时的窗口大小。

有没有人看到我正在尝试做的事情有什么我没有看到的问题，或者对如何实现这一点有任何其他想法？

最好的，提前感谢，
萨米

编辑：

注意到我正在将 ProcessingJS 草图加载到画布中可能会很好。我不知道加载所需的时间是否会对事情产生影响，但我想我不妨提一下这个......

我是一个完全的 jQuery 新手，所以我为任何明显的疏忽道歉。现在我有一个网站，当单击某些链接时，我正在使用 jQuery Tools Overlay 加载外部 html (http://flowplayer.org/tools/demos/overlay/external.html)。这工作正常。

我遇到麻烦的地方是当我在 html5-canvas 中绘制的对象被单击时尝试触发覆盖。注意：我在检测单击对象时没有问题，我遇到的唯一问题是触发弹出窗口。

以下代码是我目前用来用外部页面填充 div 的代码，我想知道是否有人可以指出我正确的方向，使其不特定于链接。

谢谢！

更新：我最终得到的解决方案正如程序演示所描述的那样：将目标 div 转换为覆盖，并将负载设置为 true。要加载外部 html，只需保留上面的“onBeforeLoad”函数的内容。

I've searched on the web for a code sample for creating a mind map using <canvas>. I've found that the infoVis toolkit samples use direct json for their mind map. I have a pre-constructed json and it will be a problem to convert it to the required format (id, children etc).

What I need is a way to convert a hierarchy of items into a map like visualization. Any help/ hint is appreciated

我正在学习 HTML5，但我陷入了困境。

句法

我没有完美地得到这个 startAngle，endAngle 这两个参数是如何计算来绘制不同类型的圆、弧的？

大家好，感谢您提前提供的任何帮助。我正在编写一个 phonegap 应用程序，并且无法在不丢失外观或错误裁剪图像的情况下缩小照片。在下面的函数中，“imageData”是相机拍摄的照片的 64 位字符串。我可以在我的页面上将图像绘制到画布上，但如果图片是横向拍摄的，那么它会被粉碎在一起。如果我不使用 scale 函数或 drawimage 函数对其进行缩放，那么我只会得到照片的顶角。一个例子：我拍了一张照片，onPhotoDataSuccess 函数中的图像宽度显示它是 1296px 宽和 968px 高。但我在 iPhone 上的画布是 272px 宽（纵向模式）。我在网上尝试了许多不同的缩放方法，这似乎不是最接近的。我究竟做错了什么？

当我尝试在 Chrome 中使用 globalCompositeOperation 来遮罩/混合形状和文本（形状遮罩/与其他形状混合效果很好）时遇到了一个问题（更具体地说，我使用的是 Chrome 12.0.7）。谁能建议我在这里可能误入歧途的地方或在画布元素中建议一种解决方法？

这是显示我所看到的图像：http: //i.stack.imgur.com/wRunv.jpg

下面是重现这些结果的代码：

我似乎无法从我的画布（Chrome 12）中获取像素数据。我究竟做错了什么？

完整的例子。我所有的控制台日志都为零。我希望黑白像素混合在一起。

澄清：我正在绘制一个黑色方块来测试我是否可以正确检索像素数据。我希望有一些255, 255, 255（白色）和一些0, 0, 0（黑色）。我只得到白色像素数据。

是否可以使用 clearRect 删除使用 drawImage 绘制到画布上的 png 图像的一部分？

我正在尝试这样的事情，但它不起作用：

然后使用 clearRect 用鼠标擦除。擦除适用于使用 drawLine 添加到画布的笔画，但不适用于使用 drawImage 的图像。它必须是 clearRect 而不是绘制纯色，因为背景不是纯色。是否有可能做到这一点？