html5 自动矢量化,html5中地图矢量化

#第六届英特尔杯全国大学生软件创新大赛博客征集#

上一篇中介绍了html5对于gis中实现实时矢量化绘图的优点，这里介绍一下html5种使用canvas对象的基本操作(PS上一篇《菜鸟浅谈html5与webgis》发在了article里，微博小编说可以搬到blog里作为博客征集，然后我就重新将那篇发在blog里，但是过了几天后，重新发表的那篇状态还是draft，不知什么情况)：

我们可以获取canvas对象为var

c=document.getElementByIdx_x("myCanvas");其应有js属性方法如下列举：

1：绘制渲染对象，c.getContext("2d"),获取2d绘图对象，无论我们调用多少次获取的对象都将是相同的对象。

2：绘制方法： clecrRect(left,top,width,height)清除制定矩形区域，

fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。

fillText(text,x,y)绘制文字；

strokeRect(left,top,width,height)绘制矩形，以strokeStyle绘制边界。

beginPath():开启路径的绘制,重置path为初始状态；

closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线；

moveTo(x，y)：设置绘图其实坐标。 lineTo(x，y);绘制从当前其实位置到x，y直线。

fill()，stroke()，clip()：在完成绘制的最后的填充和边界轮廓，剪辑区域。

arc()：绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小； rect():矩形路径; drawImage(Imag

img)：绘制图片； quadraticCurveTo():二次样条曲线路径,参数两个控制点；

bezierCurveTo()：贝塞尔曲线，参数三个控制点；

createImageData,getImageData，putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据

data，其中data为我们色素的记录为

argb，所以数组大小长度为width*height*4，顺序分别为rgba。getImageData为获取矩形区域像素，而putImageData则为设置矩形区域像素；

3：坐标变换： translate(x,y)：平移变换，原点移动到坐标(x，y)； rotate(a)：旋转变换，旋转a度角；

scale(x，y)：伸缩变换；

save()，restore()：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态；