Tag: canvas

SVG和HTML5 Canvas有什么区别？

SVG和HTML5 Canvas有什么区别？ 他们两人似乎对我也一样。 基本上，他们都使用坐标点绘制vector图稿。 我错过了什么？ SVG和HTML5 Canvas之间的主要区别是什么？ 为什么我应该select一个呢？

根据覆盖的背景区域的亮度更改文字颜色？

我已经想了一段时间了，所以现在我想知道你的意见，可能的解决scheme，等等。 我正在寻找一种插件或技术来改变文本的颜色，或者根据其父​​母的背景图像或颜色的覆盖像素的平均亮度，在预定义的图像/图标之间切换。 如果背景的覆盖区域比较黑暗，请将文本设为白色或切换图标。 此外，如果脚本会注意到，如果父级没有定义背景颜色或图像，然后继续search最接近的（从父元素到它的父元素..），那就太好了。 你怎么看，知道这个主意？ 那里有类似的东西吗？ 脚本的例子吗？ 干杯，J

Unicoin挖掘和canvas点击

我真的想自动化unicoin挖掘，以便它可以在后台进行，而我做重要的事情，如在stackoverflow上回答问题。 我注意到，有一个canvas#uc-rockcanvas元素，你可以点击岩石。 点击似乎添加类md ，然后释放点击删除md 。 有没有什么方法可以使用JavaScript与canvas的特定元素进行交互，以便触发对它们的点击？

如何在html5中居中canvas

我一直在寻找一个解决scheme，但还没有find任何东西。 也许这只是我的search条件。 那么，我试图根据浏览器窗口的大小制作canvas中心。 canvas是800×600。 如果窗口低于800×600，它应该resize（但目前不是很重要）

如何在html5中制作透明的canvas？

我怎样才能使canvas透明？ 我需要，因为我想把两个canvas在另一个之上。

如何将一个canvas的内容复制到另一个canvas本地

我想复制一个canvas的所有内容，并将它们转移到客户端的所有内容。 我会认为我会使用canvas.toDataURL()和context.drawImage()方法来实现这一点，但我遇到了一些问题。 我的解决scheme是获取Canvas.toDataURL()并将其存储在Javascript中的Image对象中，然后使用context.drawImage()方法将其放回。 但是，我相信toDataURL方法返回一个带有"data:image/png;base64,"的64位编码标签。 这似乎不是一个有效的标签，（我总是可以使用一些正则expression式来删除这个），但是是64位编码的string之后的"data:image/png;base64,"子string有效的图像？ 我可以说image.src=iVBORw…ASASDAS ，并在canvas上画回来吗？ 我已经看了一些相关的问题： 使用base64将canvas图像从一个canvas显示到另一个canvas 但解决scheme似乎并不正确。

在HTML5canvas上绘制点

通过使用context.moveTo()和context.lineTo()函数，在HTML5canvas上绘制线条非常简单。 我不太确定是否可以绘制一个点，即单个像素的颜色。 lineTo函数不会绘制单个像素行（显然）。 有没有办法做到这一点？

HTML canvas JavaScript库和框架中的艺术现状是什么？

我目前正在研究在新的HTML 5应用程序中使用canvas的选项，并且想知道HTML canvas JavaScript库和框架中的艺术现状是什么？ 特别是，有框架支持游戏开发所需的东西 – 复杂的animation，pipe理场景图，处理事件和用户交互？ 也愿意考虑商业和开源产品。

HTML5 Canvas 100％宽度的视口高度？

我正在尝试创build占据视口宽度和高度100％的canvas元素。 您可以在我的示例中看到正在发生的事情，但是它正在Chrome和FireFox中添加滚动条。 我怎样才能防止额外的滚动条，并提供正确的窗口的宽度和高度作为canvas的大小？

快速响应的交互式图表/graphics：SVG，Canvas，其他？

我正在尝试select正确的技术来更新一个基本上呈现可缩放，可移动graphics中的数千个点的项目。 目前使用Protovis的实施效果不佳。 看看这里： http://www.planethunters.org/classify 完全缩小大约有2000点。 尝试使用底部的手柄放大一点，并拖动它平移。 你会发现它是非常不稳定的，你的CPU使用率可能会在一个内核上达到100％，除非你有一台非常快的计算机。 对焦点区域的每一个改变都会调用protovis来重绘，这相当慢，而且在绘制更多的点时会变得更糟。 我想对界面进行一些更新，并将底层的可视化技术更改为对animation和交互更加敏感。 从下面的文章中，似乎可以select另一种基于SVG的库或基于canvas的库： How to Choose Between Canvas and SVG 从Protovis发展而来的d3.js是基于SVG的， 在渲染animation方面应该更好 。 不过，我很怀疑它的性能上限是多less。 出于这个原因，我还在考虑使用像KineticJS这样的基于canvas的库进行更彻底的检修。 然而，在我使用这种或那种方法过度使用之前，我想听听有人用这么多的数据完成了一个类似的Web应用程序，并得到他们的意见。 最重要的是性能，次要的重点是易于添加其他交互function和编程animation。 一次可能不会超过2000点，每个点都有小错误。 放大，缩小和平移需要平滑。 如果最近的SVG库在这方面比较体面，那么使用d3的难易程度可能会超过KineticJS的增加设置等。但是如果使用canvas有很大的性能优势，特别是对于电脑速度较慢的用户，那么我肯定会喜欢这样。 由使用SVG的NYTime制作的应用程序示例，但仍可以stream畅地animation： http ://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。 如果我可以得到这样的性能，而不必编写自己的canvas代码，那么我可能会selectSVG。 我注意到一些用户已经使用了与canvas渲染相结合的d3.js混合操作 。 不过，我无法在网上find很多关于这个post的文档，也没有联系到这个post的OP。 如果任何人有任何这样的DOM到canvas（ 演示 ， 代码 ）实现的经验，我想也听到你的。 这似乎是能够操纵数据和自定义控制如何呈现它（以及因此性能）的一个很好的混合体，但是我想知道是否必须将所有内容加载到DOM仍然会减慢速度。 我知道有一些类似于这个问题的现存问题，但是他们中的任何一个都没有问过同样的问题。 谢谢你的帮助。 后续 ：我最终使用的实现是在https://github.com/zooniverse/LightCurves