文章分类： JavaScript

Hello World WebGL示例

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

原文：http://www.sw-engineering-candies.com/snippets/webgl/hello-world

这不是一个平常看到的Hello World示例，因为他不只是简单的打印”Hello World”，这个WebGL示例包含了很多引用代码，但这对于WebGL来说是很典型的，写一个最简单的WebGL应用无法体现WebGL的价值

你会注意到很多代码需要本地WebGL，如果你使用three.js这样的类库，引用代码会减少到最少，在这些文章中你会看到three.js示例：Experimental Visualization of Artificial Neural Network with WebGL or Extremely Fast and Simple WebGL Motion Detector to Rotate 3D Graphic

前提条件&预期结果

目前支持WebGL得浏览器还很少（参见：Can I use WebGL? ），下面的例子在Chrome 16 – 23 for win32以及firefox for android 17下做了测试，如果你的浏览器不支持webGL，你会看到下面的警告

Your browser doesn’t appear to support the HTML5 <canvas>element.

运行效果：

WebGL - hello world

Qunee中的基本图形与箭头

发表于 & 归档在 HTML, HTML5, JavaScript.

图形组件的基础是图形，图形的基础是2D，如形状，路径片段，渐变填充，边框等，SVG中每个图形要素都有对应的标签元素，Canvas中则提供了一些绘制函数，路径和形状的管理需要自己实现，Qunee组件中提供了丰富的基本图形
Qunee默认图形的效果

图形与箭头

Qunee组件制作思维导图

发表于 & 归档在 HTML, HTML5, JavaScript, Web, 案例.

客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构

qunee组件制作思维导图

使用Qunee组件制作在线地图

发表于 & 归档在 HTML, HTML5, JavaScript, Web, 地图, 案例.

地图是一种普遍应用，按准确度分精确地图（GIS）和示意地图（MapChart），前者支持各种地图投影与坐标系，譬如ArcGIS，后者使用相对坐标系，或者支持简单的WGS84经纬网坐标系，比如ILOG Elixir地图组件，示意地图再按图片类型分，可分为：栅格地图与矢量地图，Qunee组件适合制作矢量示意地图。

maps

使用Qunee组件展示水文观测站点

发表于 & 归档在 HTML, HTML5, JavaScript, 案例.

中科院的某个客户遇到这样的需求：将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件，遇到几个问题：布局难以定制、节点样式难定制、交互有问题，后来改用Qunee组件，顺利解决问题。
这是一种典型应用，主要用到Qunee的布局类TreeLayouter，以及UI和交互的简单定制

树形布局效果

HTML5 Canvas绘制效率如何？

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的

因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript 1k作品大赛（http://js1k.com/），用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势

附上SVG与Canvas的适用范围

canvas_or_SVG

HTML5之图形绘制技术（Canvas Vs SVG）

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言，成为W3C标准已经有十多年(2003.1至今)，总的来说，Canvas技术较新，从很小众发展到广泛接受，注重栅格图像处理，SVG则历史悠久，很早就成为国际标准，复杂，发展缓慢（Adobe SVG Viewer近十年没有大的更新）

Canvas_Vs_SVG1