用 JavaScript 截图

canvas 使用 JavaScript 截图,这里我要推荐两款开源组件:一个是 Canvas2Image,它可以将 Canvas 绘图编程 PNG/JPEG/BMP 的图像;但是光有它还不够,我们需要给任意 DOM(至少是绝大部分)截图,这就需要 html2canvas,它可以将 DOM 对象转换成一个 canvas 对象。两者的功能结合起来,就可以把页面上的 DOM 截图成 PNG 或者 JPEG 图像了,很酷。

Canvas2Image

它的原理是利用了 HTML5 的 canvas 对象提供了 toDataURL() 的 API:

var strDataURI = oCanvas.toDataURL();  
// returns "data:ima

[……]阅读全文

Flot 介绍

image 最近在项目里面要用到 JavaScript 来绘制图表,JQuery 的插件 Flot 是一个不错的选择。和我 之前介绍过的 D3 不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。

Flot 采用 Canvas 绘制图形(Web 总共就有三种常见方式来绘制图形,不了解的同学请看 这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3 是采用 SVG 来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG 会比较流畅。

首先介绍一下数据的格式。数据来自一个数组嵌套的 JSON 格式,如:

[[0, 3], [4, 8], [8, 5], [9, 13]]

这就给

[……]阅读全文

网络图形标准

image 前端绘图有几种方式,主流的网络图形标准有:

  • VML,IE 支持;
  • SVG,FF、Safari 和 Opera 支持;
  • Canvas,HTML5 规范支持。

后端生成图形较为便捷,但是没法生成能够响应用户行为的动态图形(比如生成一个地图,用户点击地图上的某个城市,要显示城市信息,这通过后端图形生成很不容易做到),而且生成图形会吃掉服务端的性能。前端生成图形方面,有用 Applet、ActiveX(这两个都不是什么好东西),Flash 等等,但是现在,我们有纯文本的更好的选择。

下面会就这几种标准做一个介绍:

VML

Vector Markup Language(矢量标记语言)是一种 XML 语言,用于绘制

[……]阅读全文

back to top