JS页面动态绘图工具SVG，Canvas，VML介简介

说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多了解javaapplet，对于这两种技术来说，各有利弊。
首先Flex很笨重，但是其效果实在让人喜欢。对于javaapplet来说，至少我在网络上很少看到，当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的。

其实现在Web上进行绘图的话还是有很多选择的，你可以到谷歌上搜索JS绘图，会有很多绘图工具提供给你使用，而且功能非常强大。比如说maxGraph，你可以到http://www.jgraph.com/mxgraph.html上去看一下效果。

如果你已经在网络上看了一会了我们可以继续来聊一下Web中JS绘图的内容。

工具插件满天飞，你也可以看到对于JS绘图的支持来说，JQuery和EXT都没有放松，特别是基于JQuery的插件不尽其数。
可是我要说的不是这些工具插件，我主要想说一下浏览器对于绘图的支持方面。也许你会发现，某些绘图插件并不能支持所有浏览器，这是怎么回事呢？

对于JS图形方面的支持，主要关注三个词：SVG，VML，CANVAS。

对于SVG

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。2008年12月22日，SVG Tiny 1.2成为W3C的推荐标准，W3C目前正在研究制定SVG 1.2版本。

由于SVG文件可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象，所以在进行Web中JS绘图时算是考虑的一种。

但是，SVG还是面临一些问题的。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Adobe Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。

浏览器支持情况：

对于浏览器支持方面，Mozilla Firefox自版本1.5发行后，即开始支援SVG格式的显示，Opera 8.0 版开始支援显示Tiny 1.1规格的SVG，Google Chrome和Safari支持SVG显示，Microsoft的Internet Explorer 8.0版之前尚未支援SVG，直至由Internet Explorer 9.0版开始支援SVG。也就是说，市场占有率最大的IE到目前为止才刚刚开始支持，就是说普通人使用的IE浏览器是不能使用的，而且对于支持程度来说，对SVG支持最好的浏览器是Opera，它支持大多数的SVG特性，其他浏览器不能支持一些属性。难道我们给客户说你必须安装Opera浏览器？

来看一个SVG的绘图效果：

对于Canvas

Canvas元素是HTML5的一部分，允许脚本动态渲染位图像。最初由苹果公司内部使用，后来才有人组建议为下一代的网络技术使用该元素。
对于该元素，首先来说的就是浏览器支持方面。Firefox，Safari和Opera9都支持canvas tag，canvas用来绘制2D图形。但是IE不支持canvas。Google就开发了excanvas，模拟canvas在其他浏览器的状态。
excanvas目前版本为excanvas_r3，还有许多Bug，另外在IE上使用效率绝对是个问题，因为excanvas其实是使用IE中VML来实现canvas效果的。

看一下Demo中绘图效果：

对于VML

VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。但是VML只是被IE支持。

来看一个VML的绘图效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js+h5 canvas实现图片验证码

    本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下 实现效果 一.使用技术 原生js技术+html5 canvas画图 利用Math.random()函数随机生成 颜色 字符串  及障碍物 点击 验证码可变更验证码图案 二.使用步骤 1.html+css 代码如下(示例): <div class="login_code_box"> <div class="login_code"> <input

  • js+canvas实现刮刮奖功能

    本文实例为大家分享了js+canvas实现刮刮奖的具体代码,供大家参考,具体内容如下 1.实现了PC端的刮刮奖效果 2.使用了canvas的文本,像素操作,合成,绘制图形,随机数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { mar

  • js实现贪吃蛇游戏 canvas绘制地图

    本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 思路 400px * 400px的地图,每20px*20px分成单元格绘制蛇身 每次移动即更换尾 部 头部的颜色 全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • js+canvas实现画板功能

    本文实例为大家分享了js+canvas实现画板功能的具体代码,供大家参考,具体内容如下 1.实现了画图,改变画笔粗细,改变画笔颜色,清屏功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>画板</title> <link rel="shortcut icon" type="image/x-icon&qu

  • js通过canvas生成图片缩略图(canvas)

    现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了. 使用Canvas我们可以轻松生成各种尺寸的图片,具体实现如下: function resizeImage(src,callback,w,h){ var canvas = document.createElement("can

  • js+canvas绘制图形验证码

    本文实例为大家分享了利用canvas绘制图形验证码的具体代码,供大家参考,具体内容如下 思路:通过随机获取指定字符串的指定数的字符,通过canvas绘制出来 返回指定范围的随机整数 //指定范围的随机函数:返回指定范围内的随机整数 function rand(min, max) { /* max=10 min=1 Math.random()=0 最小取到1 Math.random()=0.9999*10=Math.floor(9.9)=>+1=10 */ return Math.floor(Ma

  • js+canvas实现图片格式webp/png/jpeg在线转换

    功能需求: 我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式. 实现思路: 实现这样的功能,使用后端语言[php,java等]可以很容易的完成.但是如果只在前端如何完成呢? 1.通过input上传图片,使用FileReader将文件读取到内存中. 2.将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:"image/webp","image/jpeg","image/png". 3.最后将

  • JS页面动态绘图工具SVG，Canvas，VML介简介

    说到绘图.报表之类的技术,大家首先想到的就是Flex,当然也有许多了解javaapplet,对于这两种技术来说,各有利弊. 首先Flex很笨重,但是其效果实在让人喜欢.对于javaapplet来说,至少我在网络上很少看到,当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的. 其实现在Web上进行绘图的话还是有很多选择的,你可以到谷歌上搜索JS绘图,会有很多绘图工具提供给你使用,而且功能非常强大.比如说maxGraph,你可以到http://www.jgraph.com/mxgra

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

  • Android原生绘图工具Canvas详细

    Android原生绘图工具Canvas详细

    目录 1.Canvas提供的绘制函数 2.绘制背景 3.绘制矩形drawRect 4.绘制圆角矩形drawRoundRect 5.绘制圆形drawCircle 6.绘制路径drawPath 7.绘制直线drawLine 8.绘制圆弧drawArc 9.绘制椭圆drawOval 10.绘制点drawPoint 11.绘制文本drawText 沿路径绘制文本drawTextOnPath 12.绘制bitmap drawBitmap 如果对上一篇感兴趣的话可以看看Android原生绘图Paint 下面

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • js显示动态时间的方法详解

    js显示动态时间的方法详解

    本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的

  • 详解Next.js页面渲染的优化方案

    在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验,但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题.由于我之前既不知道这个框架的工作原理,自然也就不知道如何去优化它.乘着农历春节前工地活少所以稍微研究一下. 第一个问题:宣称前后台同构的Next.js为何会出现卡顿现象? Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染,

  • JS获取动态添加元素的方法详解

    本文实例讲述了JS获取动态添加元素的方法.分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1.  在模板引擎里面添加行内事件 2.  利用事件的委托获取(常用) 3.  在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. <!-- 1.准备一个模板 --> <script id=&q

  • JS画布动态实现黑客帝国背景效果

    本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下 效果图 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g

  • 详解PyQt5 GUI 接收UDP数据并动态绘图的过程(多线程间信号传递)

    详解PyQt5 GUI 接收UDP数据并动态绘图的过程(多线程间信号传递)

    目录 1. Qt 的用法 2. Pycharm 设置 2.1 安装 Pyqt5 和 pyinstaller 包 2.2 Pycharm pyqt工具配置 3 UDP图形界面设计 3.1 GUI设计 3.2 将GUI文件转换为py文件 3.3 widget窗体提升,整合matplotlib的功能 3.4 GUI 设计结果 4 多线程编程UDP通讯 4.1 信号和槽函数 4.2 多线程 5 Pyinstaller 打包成exe 1. Qt 的用法   pyqt5是qt的python版本,其主要是以对

随机推荐