svg+js+path直线的拖动与缩放

评论(0)浏览(348)分类:Canvas/VML/SVG
svg+js+path直线的拖动与缩放svg width="800" height="800" script![CDATA[ var SVGDocument = null; var SVGRoot = null; var TrueCoords = null; var Point = null; var BackDrop = null; var DragTarget = null; var dArray = new Array(12);//定义path d属性的数组 var dragger = null; var x; //当前鼠标(坐标) var y; var X1;//起点坐标 var Y1; var XL1;//path L..

google chart显示全部顶点的tooltip

评论(0)浏览(260)分类:JavaScript/Ajax开发技巧
google chart显示全部顶点的tooltip2012-9-18更新:IE9部分浏览器支持svg绘图,修改了获取路径的方法。由于IE得到的path信息会多一些空格出来,改为用正则获取顶点信息  今天在csdn看到一个使用google chart绘制LineChart图标,需要提示显示全部显示出来,而不是当鼠标悬浮到顶点的时候才显示提示信息tooltip。  下午看了下google chart的api文档,没有发现有显示全部提示信息..

Canvas使用教程——几何图形绘制(Drawing shapes)

评论(0)浏览(236)分类:Canvas/VML/SVG
Canvas使用教程——几何图形绘制(Drawing shapes)原文:http://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapesThe grid在我们开始绘制图形前,我们先探讨一下canvas中的网格及坐标空间。在前一篇教程中,我们定义了一个150*150的canvas区域,并在该区域绘制了一个图形。在canvas区域中,以左上角为坐标原点(0,0),坐标最小单位为1px。区域内所有元素相对与原点定位。不过在以后的实例..

javascript获取vml对象path属性

评论(0)浏览(204)分类:JavaScript/Ajax开发技巧
javascript获取vml对象path属性  今天研究vml时发现,当获取到vml对象时,获取到的path属性为object,并且没有toString方法,⊙﹏⊙b汗,IE下的path属性到底是个什么鬼东西,没有toString方法。  要获取实际的vml对象的path值时,可以使用vmlobj.path.value获取,value属性为string类型。按照vmlobj.path.value获取实际值,那么vmlobj.path应该为json类型的随性,尽然没有..

Canvas使用教程——动画基础(Basic animations)

评论(0)浏览(186)分类:Canvas/VML/SVG
Canvas使用教程——动画基础(Basic animations)来源:https://developer.mozilla.org/en/Canvas_tutorial/Basic_animationsSince we're using script to control canvas elements it's also very easy to make (interactive) animations. Unfortunately the canvas element was never designed to be used in this way (unlike Flash) so there are limitations.Probably the biggest limitat..

canvas绘制线条和图案

评论(0)浏览(180)分类:Canvas/VML/SVG
canvas绘制线条和图案  没有canvas之前,想要在网页上面绘制线条或图案,是非常麻烦且不兼容的。在《js画直线》一文中转载了网络上常用的在IE和FF中绘制线条的方法,但如果想要这些方法通用,则是不可能的。但现在有了canvas标签,一切就变得简单了。  现在,你只需要在页面上添加canvas标签,并通过Javascript调用它的相应方法,就可以轻松的在页面上绘制线条和..

Canvas绘图(Drawing Graphics with Canvas)

评论(0)浏览(176)分类:Canvas/VML/SVG
Canvas绘图(Drawing Graphics with Canvas)来源:https://developer.mozilla.org/en/Drawing_Graphics_with_CanvasMost of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant.IntroductionWith Firefox 1.5, Firefox includes a new HTML element..

Canvas使用教程——图像合成(Compositing)

评论(0)浏览(164)分类:Canvas/VML/SVG
Canvas使用教程——图像合成(Compositing)来源:https://developer.mozilla.org/en/Canvas_tutorial/CompositingIn all of our previous examples, shapes were always drawn one on top of the other. This is more than adequate for most situations. This, for instance, limits in what order composite shapes are built up. We can however change this behaviour by setting the..

如何获得svg文件的内嵌svg的文档对象

评论(0)浏览(158)分类:Canvas/VML/SVG
如何获得svg文件的内嵌svg的文档对象svg文件内容如下:(说明:用的不是adobe的SVG,不支持内嵌javascript) +展开-XML?xmlversion="1.0"encoding="UTF-8"?>svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:go="http://purl.org/svgmap/svgmap#"metadatardf:RDFxmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:crs="http://..

google chart IE无法响应ready事件

评论(1)浏览(147)分类:JavaScript/Ajax开发技巧
google chart IE无法响应ready事件  使用google chart绘制LineChart图像时,在IE7,IE8下会无法响应ready事件,firefox,chrome没有问题,其他浏览器没有测试。  没有办法,IE下只能用计时器检查google chart生成的iframe对象的document.readyState=='complete'是否成立了。源代码如下function drawChart(){//绘图函数 var chart = new google.visualization.LineCh..

Canvas使用教程——基本语法(Basic usage)

评论(0)浏览(145)分类:Canvas/VML/SVG
Canvas使用教程——基本语法(Basic usage)原文:http://developer.mozilla.org/en/Canvas_tutorial/Basic_usage好,现在开始我们的canvas探究之旅……canvas id="tutorial" width="150" height="150"/canvas乍看上去,该标签类似于img,不过它不支持src和alt属性,canvas标签仅仅支持2个属性:width和height。当宽度和高度没有指定时,他们的默认值为300px和150px。该元素可以象任何普通..

HTML5 canvas简介

评论(0)浏览(141)分类:Canvas/VML/SVG
HTML5 canvas简介  HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像。Canvas是一个矩形区域,使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习。  canvas标签说明:canvas标签是一个矩形区域,它包含两个属性width和height,分别表示矩形区域的宽和高,这两个属性都是可选的,并且都可以通过css来设..

javascript检查浏览器是否支持canvas

评论(0)浏览(139)分类:Canvas/VML/SVG
javascript检查浏览器是否支持canvas  Canvas标签并没有得到目前所有浏览器的支持,因此在使用canvas绘图的时候,要先检测客户端浏览器是否支持。下面的示例将通过Javascript判断浏览器是否支持: canvas id=myCanvas width=300 height=200 style=border:1px solid #c3c3c3; Your browser does not support the canvas element. /canvas script type=text/java..

canvas绘制路径

评论(0)浏览(135)分类:Canvas/VML/SVG
canvas绘制路径  路径是绘制自定义图形的好方法,在canvas中通过beginPath()方法开始绘制路径,这个时侯你就可以绘制直线、曲线等,绘制完成后调用 fill()和stroke()完成填充和设置边框,通过closePath()方法结束路径的绘制。下面的例子讲演时如何绘制路径: bcanvas绘制路径/bbr/canvas id=myCanvas width=300 height=200 style=border:1px solid #c3c3..

SVG主要元素和属性

评论(0)浏览(130)分类:Canvas/VML/SVG
SVG主要元素和属性 desc/desc 注释!-- --defs/defs 预定义 待引用 element id="name" 引用属性:url(#name)use xlink:href/use 引用元素 symbol 模版image width height width height不能省属性 xml:space="default|preserve" 英文空格属性 externalResourceRequired="false|true" 必需外部资源与否 若为true 找不到外部资源 不支持switch选择 平台rect..

svg DOM的一些js操作

评论(0)浏览(129)分类:Canvas/VML/SVG
svg DOM的一些js操作这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg.下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别)Circlevar svgns = "http://www.w3.org/2000/svg";function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var ..

Canvas使用教程——图片应用(Using images)

评论(0)浏览(115)分类:Canvas/VML/SVG
Canvas使用教程——图片应用(Using images)原文:https://developer.mozilla.org/en/Canvas_tutorial/Using_imagesCanvas另一大运用就是可以对图片进行二次创作或修改。貌似这个是目前唯一一个办法可以动态的往图片上加字的方法^o^。图片的格式可以是任意一种Gecko浏览器支持的格式,并且在同一页面上的其他canvas竟然也可以作为源来引用。Importing images图片的导入需要2个步骤:首先,..

Canvas使用教程——开题(Canvas tutorial)

评论(0)浏览(113)分类:Canvas/VML/SVG
Canvas使用教程——开题(Canvas tutorial)原文:http://developer.mozilla.org/En/Canvas_tutorialcanvas是一个可以用JS脚本来作画的HTML标记,用它来可以做些简单的绘图、图片变换或者动画等等。canvas标记最早是被Mac OS X Dashboard及其后的Safari浏览器引入,如今,基于Geoko 1.8内核的浏览器,比如FireFox 1.5等也开始支持这个新的标签,并且是已制定的HTML5标准的标记之一。在以下..

Canvas使用教程——图形变换(Transformations)

评论(0)浏览(102)分类:Canvas/VML/SVG
Canvas使用教程——图形变换(Transformations)来源:https://developer.mozilla.org/en/Canvas_tutorial%3aTransformationsSaving and restoring stateBefore we look at the transformation methods, I'll introduce two other methods which are indispensable once you start generating ever more complex drawings.save()restore()The canvas save and restore methods are used to sav..

Canvas使用教程——样式与颜色应用(Applying styles and colors)

评论(0)浏览(77)分类:Canvas/VML/SVG
Canvas使用教程——样式与颜色应用(Applying styles and colors)原文:https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colorsIn the chapter about drawing shapes I used only the default line and fill styles. In this chapter we will explore all the canvas options we have at our disposal to make our drawings a little more attractive.ColorsUp until now we've only se..