相关疑难解决方法(0)

作为一个例子,我只想绘制一些东西并为其添加一个事件处理程序.我确定我做了一些愚蠢的事情,但我已经搜索了所有内容并且没有任何建议(例如,这个问题的答案: 添加onclick属性以使用JavaScript输入).我正在使用Firefox 10.0.1.我的代码如下.您将看到几条注释行,并在每一行的末尾是对(或什么不)发生的描述.

这里的语法是什么？我要疯了!

<html>
<body>
    <canvas id="myCanvas" width="300" height="150"/>
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function() { alert('hello world!'); };  - does nothing
        // elem.onClick = function() { alert("hello world!"); };  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, …

Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas onclick event-handling

Jer*_*Jer

2017 05-23

116
推荐指数

2
解决办法

20万
查看次数

快速响应的交互式图表/图表:SVG,Canvas,其他？

我正在尝试选择合适的技术来更新项目,该项目基本上可以在可缩放的可缩放图形中渲染数千个点.使用Protovis的当前实现表现不佳.看看这里:

http://www.planethunters.org/classify

完全缩小时大约有2000个点.尝试使用底部的手柄放大一点,然后拖动它以平移.除非你有一台真正快速的计算机,否则你会发现它非常不稳定,你的CPU使用率可能在一个核心上达到100%.对焦点区域的每次更改都会调用重绘为protovis,这种方法非常慢,并且绘制的点数越多越差.

我想对界面进行一些更新,以及更改底层可视化技术,以便更灵敏地进行动画和交互.从下面的文章看,似乎是在另一个基于SVG的库或基于画布的库之间进行选择:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

d3.js,源自Protovis,基于SVG,应该更好地渲染动画.但是,我怀疑它有多好,它的性能上限是多少.出于这个原因,我也在考虑使用像KineticJS这样的基于画布的库进行更彻底的改造.然而,在我使用一种或另一种方法之前,我想听听那些使用这么多数据做过类似Web应用程序并得到他们意见的人.

最重要的是性能,第二个重点是易于添加其他交互功能和编程动画.一次可能不会超过2000个点,每个点上的误差小.放大,缩小和平移需要顺利进行.如果最新的SVG库在这方面还不错,那么使用d3的方便性可能会超过KineticJS的增加设置等.但是如果使用画布有巨大的性能优势,特别是对于计算机速度较慢的人来说,那么我肯定会喜欢这样.

使用SVG的纽约时报制作的应用程序示例,但仍然可以顺利地动画:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html .如果我可以获得该性能而不必编写自己的画布绘图代码,我可能会选择SVG.

我注意到一些用户使用了混合的d3.js操作和画布渲染.但是,我无法在网上找到很多关于此的文档或与该帖子的OP联系.如果有人有任何使用DOM-to-Canvas(演示,代码)实现的经验,我也想听听你的意见.它似乎是一个很好的混合体,能够操纵数据和自定义控制如何渲染它(以及因此性能),但我想知道是否必须将所有内容加载到DOM仍然会减慢速度.

我知道有一些类似于这个问题的现有问题,但它们都没有提出同样的问题.谢谢你的帮助.

后续行动:我最终使用的实现是https://github.com/zooniverse/LightCurves

html5 svg canvas d3.js kineticjs

And*_*Mao

2017 05-23

112
推荐指数

3
解决办法

4万
查看次数

Kineticjs vs Raphaeljs

我正在使用HTML5开始一个新项目.两个最流行的图形工具包是KineticJS和RaphaelJS.如果您有使用这些的经验,您有什么建议吗？它们提供哪些功能,并且使用一个优于另一个？

例如,只有RaphaelJS适用于旧版浏览器(但这不是我要求的功能).

html5 canvas raphael kineticjs

Art*_*yan

2012 08-24

33
推荐指数

1
解决办法

2万
查看次数

d3.js的HTML5画布替代品,图形可视化库

是否有任何类似d3.js的Canvas库(是svg库).我在这里有一个网站,我用svg元素编写了一个图形,但它在智能手机的浏览器上效率不高,而且运行速度很慢.我现在想要用它的2d画布类型来改变它,看它是否更好.你能建议一个对此有用的画布库吗？

谢谢...

html5 web-applications html5-canvas d3.js

Ere*_*lge

lucky-day

20
推荐指数

5
解决办法

3万
查看次数

Canvas vs. SVG游戏

我意识到有很多教程和网站,一切都在回答"哪个更适合游戏应用程序？" 他们都说SVG不适合游戏应用,画布就是.但这让我很困惑.

一旦画布上有东西,它就会被遗忘.
SVG元素可以在创建后更改,而不会触及游戏中的任何其他视觉项目.
Canvas没有内置动画
SVG内置了动画

所以我要说我正在做一个平台游戏.我希望主角走过舞台,背景画得很漂亮.在Canvas中,我要么必须重新创建她的整个hitbox(重新绘制每个移动实体的位置),要么制作一个单独的画布元素并使用可能ctxChar, ctxBG, ctxItems等等.另一方面,SVG内置它.我甚至可以放一个<animate>她的内部标签<use>,改变她的x位置(或通过JS手动改变它)标签,而另一个<animate>标签改变她的精灵.然后永远不必触及背景.

至于同时制作一堆元素的动画,我不知道在Canvas中的速度如何比在SVG中更快.将svg元素放入组中有什么问题？它可以比重绘hitboxes的背景并为所有实体重绘实体本身更慢吗？

编辑:我认为我的真正问题不在于SVG是否可行,而是为什么人们认为它不可行.

svg canvas 2d-games

Rob*_*nce

2016 08-12

15
推荐指数

1
解决办法

1万
查看次数