轻量级网页客户端矢量图形绘制技术总结（lightweight techniques for online drawing）
2009-02-11 11:55
417 查看
提到在线绘图，目前最流行的技术应该属Flex了（可参见另一篇文章：15个强大的在线图片编辑器 ），另外Silverlight在此方面也很有潜力。相比之下，诸多轻量级的客户端矢量图形绘制技术却显得有点鲜为人知。谨以此文总结我一年以来收集的此方面的相关资料与心得，与大家分享！
在一些web客户端客户端开发中，轻量级客户端矢量图形绘制技术还能够起到重要的作用。
VML(Vector Markup Language) is an application of Extensible Markup Language (XML) 1.0 which defines a format for the encoding of vector information together with additional markup to describe how that information may be displayed and edited.
例子：使用VML与鼠标绘图：
请使用FF或Safari观看
<html>
<head>
<title>A canvas fillRect, strokeRect and clearRect example</title>
<meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
<meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
<style type="text/css">
body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }
pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
</style>
</head>
<body onload="drawShape();">
<h1>An example of fillRect, clearRect and strokeRect</h1>
<div>
<canvas id="tutorial" width="150" height="150"></canvas>
<pre>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</pre>
</div>
</body>
</html>
Canvans不仅能够绘制2D、3D的矢量图形，还可以与JS交互来实现一些复杂的动画：
Canvans教程：
https://developer.mozilla.org/cn/Canvas_tutorial
Canvas示例集
Canvas articles and other resources
http://www.c-point.com/javascript_vector_draw.htm
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
文章写的仓促，其实这方面技术有很深，不足之处请多多补充
Thanks.
在一些web客户端客户端开发中，轻量级客户端矢量图形绘制技术还能够起到重要的作用。
1. VML 矢量标记语言
维基百科对VML的解释如下：VML(Vector Markup Language) is an application of Extensible Markup Language (XML) 1.0 which defines a format for the encoding of vector information together with additional markup to describe how that information may be displayed and edited.
例子：使用VML与鼠标绘图：
请使用FF或Safari观看
<html>
<head>
<title>A canvas fillRect, strokeRect and clearRect example</title>
<meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
<meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
<style type="text/css">
body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }
pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
</style>
</head>
<body onload="drawShape();">
<h1>An example of fillRect, clearRect and strokeRect</h1>
<div>
<canvas id="tutorial" width="150" height="150"></canvas>
<pre>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</pre>
</div>
</body>
</html>
Canvans不仅能够绘制2D、3D的矢量图形，还可以与JS交互来实现一些复杂的动画：
Canvans教程：
https://developer.mozilla.org/cn/Canvas_tutorial
Canvas示例集
Canvas articles and other resources
4. 推荐的第三方开源框架：
除了上述三种技术之外，一些开源的WEB绘图框架也做的很好，尤其是在浏览器兼容方面，在此向大家推荐下列两个：http://www.c-point.com/javascript_vector_draw.htm
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
文章写的仓促，其实这方面技术有很深，不足之处请多多补充
Thanks.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Raphael一个用于在网页中绘制矢量图形的Javascript库
- Raphael一个用于在网页中绘制矢量图形的Javascript库
- SVG关注复杂图形的网页绘制技术
- android高级技术总结图（一）——view的绘制过程
- android绘制图形总结
- C# 绘制矢量图形
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- 【DirectX】D3D中基本图形绘制（总结）
- opencv for python 之 创建图片绘制简单几何图形
- supermap iClient for silverlight 根据坐标点 绘制图形
- 第二十三天 cookie客户端或浏览器状态管理技术的总结
- Quart 2D 绘制图形简单总结
- SetStyle 双缓冲技术实现绘制图形不闪烁
- SVG（可缩放矢量图形）基本图形绘制方法与path路径命令
- Android API Guide for Animation and Graphics（五）—— 动画与图形（画布和可绘制对象）
- 【技术】Java入门：for-each循环语句使用总结
- iOS推送技术总结-(证书的生成、客户端的开发、服务端的开发)
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- 3D图形技术术语汇总--openGL阅读总结
- (译)Cocos2d_for_iPhone_1_Game_Development_Cookbook：1.4绘制OpenGL图形