[Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言
本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
的补充和实例说明各种技术的使用方式。
VML 的用法和实例
<HTML xmlns:v = "urn:schemas-microsoft-com:vml">
<HEAD><TITLE>VML Example</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD>
<body>
<v:line from="20,20" to="200,200"></v:line>
</body>
</html>
说明: xmlns:v = "urn:schemas-microsoft-com:vml" 必不可少, 是引入VML的命名空间。
SVG 的用法及实例
<HTML xml:lang="en"xmlns="http://www.w3.org/1999/xhtml"xmlns:svg="http://www.w3.org/2000/svg">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
</BODY>
</HTML>
很简单,也是画一条线,语法基本和VML类似
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></svg>
embed 标签方式==》
<HTML>
<HEAD>
<TITLE>Embed SVG </TITLE>
</HEAD>
<BODY>
<embed src="line.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</BODY>
</HTML>
这是Adobe SVG Viewer推荐的方法。主持所有主流浏览器,允许使用脚本;不过这个标签不是合法的XHTML.
object标签 ==>
<HTML>
<HEAD>
<TITLE> Object SVG </TITLE>
</HEAD><BODY>
<object data="line.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</BODY>
</HTML>
被所有较新的浏览器支持,不允许使用脚本。 如果安装了最新版本的Adobe SVG Viewer,会出现一些问题。
<HTML>
<HEAD>
<TITLE> IFrame SVG </TITLE>
</HEAD><BODY>
<iframe src="line.svg" width="300" height="100">
</iframe>
</BODY>
</HTML>
HTML5 Canvas 元素绘图
canvas 是HTML5支持的一种元素。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<HTML>
<HEAD>
<TITLE> Canvas </TITLE></HEAD><BODY>
<canvas id="myCanvas" width="200" height="100"></canvas><script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
</script>
</BODY>
</HTML>
一些说明
IE9 及以上已经支持svg了, 而且微软本身也把VML作为一种过时技术来看待了。
[Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例相关推荐
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
先介绍一下矢量图的概念: 矢量图使用直线和曲线来描述图形,这些图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外框 ...
- [Web Chart系列之二] 各种实现js 图表的library汇总与比较
前言 使用js 在浏览器展现图表, 参考系列一 Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 汇总 目前实现web 图表的js library 数量是很多, 此处汇总: Nam ...
- [Web Chart系列之五] 图形布局-Circle Layout 之实现
前言 关于Circle Layout 的基本介绍, 可以参考: [Web Chart系列之三] 图形布局-Layout 布局的现实使用状况 这里使用这种布局来布局特定对象的关联. 这里的这些对象类似于 ...
- [Web Chart系列之三] 图形布局-Layout
前言 从上一篇: [Web Chart系列之二] 各种实现js 图表的library汇总与比较 的介绍, 目前提供提供绘制矢量图的library 还是很多的. 如果只是需要绘制一些柱状图, 饼图, ...
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
draw2d 是什么? 首先需要明确的是这里指的draw2d是个什么东东? 用draw2d这个关键字,询问一下谷哥和度娘基本上会找到两个东西 一个是集成在eclipse(也可以单独使用) 里面使用SW ...
- [Web Chart系列之四] 图形布局-Layout 之js设计实现
前言 定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样. 如果使用现有的js library (各种实现js 图表的library汇总与比较) ...
- [Web Chart系列之六] canvas Chart 导出图文件
介绍 使用SVG绘制的图形可以导出为svg 格式的文件,使用浏览器等可以查看. 是否可以导出为png, gif 格式的文件呢? 当然是可以. 只是在 web 直接创建和操作文件是不建议的,而且存在各浏 ...
- 【opencv系列04】OpenCV4.X图形绘制
点击上方"AI搞事情"关注我们 一. 基本图形绘制 1. 基本函数与参数 cv2.line(): 线 cv2.circle(): 圆 cv2.rectangle(): 矩形 cv2 ...
- [Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
颜色渐变 draw2d 目前没有提供直接对Figure 设置渐变效果的API. 但是raphael 有提供, 这样的话基本上在draw2d实现渐变成为可能. 颜色渐变功能来源 raphael 提供的图 ...
最新文章
- 集成ACEGI 进行权限控制
- 第一章--最小的“操作系统”
- php连接plc,PLC 几种常见的连接口和通讯协议
- 软件测试中英文词汇汇总
- 「 Modbus-RTU报文解析」解析03、06、10功能码报文示例
- 《黑天鹅》读书笔记(part4)--对许多人而言,知识的强大作用在于制造自信,而不是提高能力。
- Unity 基本操作
- windows下,linux下elasticsearch安装插件head插件的步骤
- Linux网络端口命名规则,一致性网络设备命名
- 【codevs1245】最小的N个和
- kafka安装完整步骤_还在寻找Kafka最新的安装教程吗?精细的安装步骤分享给大家...
- Shell定时删除日志
- HDU 2553(N皇后问题)
- Thinking in Java 10.8.1 闭包与回调
- 工作中要注意拍照录像,证明工作完成
- apache poi excel显示 base64 图片_java操作Excel一:POI
- 微信转发别人语音的方法
- win10 系统 MySQL安装及修改密码
- Windows, 使用https访问网页提示此网站的安全证书有问题解决方法
- SQL 已死,NoSQL才是王道?醒醒吧,别瞎说八道了
热门文章
- 2016年事记与感悟
- Kibana+Logstash+Elasticsearch 日志查询系统
- uva_1422 Processor
- 记录sqoop同步失败问题解决过程,过程真的是很崎岖。(1月6日解决)
- 解决Ubuntu刚装好的时候su命令密码错误的问题
- lambda List实现某列去重的解决方案采用扩展方法
- vue.js页面刷新出现闪烁问题的解决
- 如何检查字符串是否包含特定的单词? [英]How do I check if a string contains a specific word?
- 【投资策略】2022 年大类资产配置展望:稳中求进-中金公司
- SIM: 基于搜索的超长行为序列上的用户兴趣建模