关于Javascript绘制图形技术的讨论

明珠佩佩 2011-06-09 08:19:17

加精

目前，WEB的应用中，在页面上绘制图形的技术可以说是百花齐放，据了解主要有以下几种方式：

1、利用DIV+CSS+DHTML实现

2、利用Javascript库实现，例如jsDraw2D、高性能矢量图形库wz_jsgraphics.js

3、利用SVG/VML+JS库实现，例如Raphael.js库

本次发帖是想了解论坛里做过这块开发的兄弟们常用的是哪种，或者有其他更好的方法。

请注意，这里提及的绘制图形绝不是绘制图表。

...全文

5010 88 打赏收藏转发到动态举报

写回复

88 条回复

切换为时间正序

请发表友善的回复…

发表回复

淮河神 2013-10-24

打赏
举报

回复

引用 60 楼 ayanami001 的回复:

这个东东好像最头疼的问题是浏览器兼容........

是额，像 raphael 这样的库也有兼容性问题。

madpc 2011-06-22

打赏
举报

回复

最直接的应该是 canvas, 这才是真正的专门用来绘图的元素，顾名思义

不要把它们直接比较，是不同层次的东西， flash 还包含创作的层面

CodeArhat 2011-06-21

打赏
举报

回复

能引导用户升级客户端的话，用WebGL吧，潜力无限：
http://media.tojicode.com/q3bsp/

Zach_ZhouY 2011-06-21

打赏
举报

回复

学习学习

moyibo 2011-06-20

打赏
举报

回复

、选择一个合适的图形库，制作一个后台的编辑界面，然后绘制所需要的图形

2、将绘制的图形保存为指定的模板或专有文件

3、制作一个前台的显示页面，加载页面的同时加载指定的模版或文件

在第3步操作中，如果加入数据库的交互，即对页面图形元素的属性通过数据库进行管理

从而最终实现动态的图形显示控制

Oozie 2011-06-19

打赏
举报

回复

[Quote=引用楼主 bimyboy 的回复:]
目前，WEB的应用中，在页面上绘制图形的技术可以说是百花齐放，据了解主要有以下几种方式：

1、利用DIV+CSS+DHTML实现

2、利用Javascript库实现，例如jsDraw2D、高性能矢量图形库wz_jsgraphics.js

3、利用SVG/VML+JS库实现，例如Raphael.js库

本次发帖是想了解论坛里做过这块开发的兄弟们常用的是哪种，或者有其他更好的……
[/Quote]

用Raphael.js+ajax做过仿vista仪表盘，感觉还行。Raphael封装的很强大。

changtianshuiyue 2011-06-18

打赏
举报

回复

学习了

lilenfeng 2011-06-17

打赏
举报

回复

学习了～～～～～～

kowon 2011-06-17

打赏
举报

回复

可以考虑下FLEX

随缘不变 2011-06-16

打赏
举报

回复

学习了

awcx8888 2011-06-16

打赏
举报

回复

silverlight

li76497423 2011-06-16

打赏
举报

回复

好难.....

qingyihekan 2011-06-15

打赏
举报

回复

最近也在关注这个问题，听大家的意见！

伴老思源 2011-06-15

打赏
举报

回复

围观~

zfslovexia2009 2011-06-14

打赏
举报

回复

jquery+highcharts
用来画一些复杂的bar chart，pie chart，line chart等等非常不错，可以兼容iphone平台，主要使用json数据和后台交互，速度也还行，还可以支持自定义图形，各种事件响应也很到位

xuqiang1234560 2011-06-14

打赏
举报

回复

jquery+highcharts
用来画一些复杂的bar chart，pie chart，line chart等等非常不错，可以兼容iphone平台，主要使用json数据和后台交互，速度也还行，还可以支持自定义图形，各种事件响应也很到位，简单易学。

懒虫虫 2011-06-14

打赏
举报

回复

还是用flex来绘制图片吧，例子比较多，js有浏览兼容问题，不是太好

qq112326614 2011-06-14

打赏
举报

回复

好东西 ~~我是新人学习学习

maggiesnowfly 2011-06-14

打赏
举报

回复

学习了

luoyepiaoxin 2011-06-13

打赏
举报

回复

jquery.flot.js插件？

加载更多回复（58）

《HTML5 Canvas核心技术：图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作，也是迄今为止该领域内容最为全面和深入的著作之一，是公认的经典、五星级畅销书、资深技术专家David Geary新力作。它不仅全面讲解了canvas元素的API，以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发，还包含大量实例，可操作性极强。　　《HTML5 Canvas核心技术：图形、动画与游戏开发》共分11章。第1章介绍了canvas元素及如何在网络应用程序中使用它；第2章深入研究了如何使用Canvas的API进行绘制；第3章告诉读者如何绘制并操作Canvas中的文本；第4章专门讲解图像、图像的操作及视频处理；第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第9章以一个简单但是高效的游戏引擎开始，提供了游戏制作所需的全部支持功能；第10章讨论了实现自定义控件的通用方法；第11章专门讲述如何实现基于Canvas的手机应用程序。

基瑞编著的《HTML5Canvas核心技术：图形动画与游戏开发》是HTML5 Canvas领域的标杆之作，也是迄今为止该领域内容最为全面和深入的著作之一，是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*力作。它不仅全面讲解了Canvas元素的API，以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发，还包含大量实例：可操作性极强。　　《HTML5Canvas核心技术：图形动画与游戏开发》共分11章。第1章介绍了canvas元素及如何在网络应用程序中使用它；第2章深入研究了如何使用Canvas的API进行绘制；第3章告诉读者如何绘制并操作Canvas中的文本；第4章专门讲解图像、图像的操作及视频处理；第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第 9章以一个简单但是高效的游戏引擎开始，提供了游戏制作所需的全部支持功能：第10章讨论了实现自定义控件的通用方法；第11章专门讲述如何实现基于Canvas的手机应用程序。

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。 [1]

　《HTML5 Canvas核心技术：图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作，也是迄今为止该领域内容最为全面和深入的著作之一，是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary最新力作。它不仅全面讲解了canvas元素的API，以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发，还包含大量实例，可操作性极强。　　《HTML5 Canvas核心技术：图形、动画与游戏开发》共分11章。第1章介绍了canvas元素及如何在网络应用程序中使用它；第2章深入研究了如何使用Canvas的API进行绘制；第3章告诉读者如何绘制并操作Canvas中的文本；第4章专门讲解图像、图像的操作及视频处理；第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第9章以一个简单但是高效的游戏引擎开始，提供了游戏制作所需的全部支持功能；第10章讨论了实现自定义控件的通用方法；第11章专门讲述如何实现基于Canvas的手机应用程序。

《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让读者对Canvas建立起完整的认识。随后讨论了动画循环、记忆形状、模拟运动、碰撞检测等基本而又重要的概念，带领读者温习了必要的数学和物理知识。通过带领读者动手开发“太空保龄球”和“躲避小行星”这两款小游戏，让读者掌握开发游戏的基本流程，学会响应用户操作、创造虚拟环境、循环利用对象、设计计分系统等游戏开发必备的知识。《HTML 5 Canvas基础教程》适合各层次Web设计及开发人员阅读。

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章