canvas和svg基础

svg和canvas

SVG和Canvas都允许在浏览器中画图。但两个原理是不同的。

SVG是一种基于XML中描述二维图形的语言。

SVG基于XML，意味着DOM每一个元素都是可用的，也就是在SVG中，每一个

图形都是对象，如果有一个对象发生改变，那么全局重新生成图形。

Canvas

能够画二维图片，但是基于JS， 能够根据像素重新生成。

但是注意：在Canvas中一旦生成该图片，就会被浏览器所抛弃。

只要图形位置发生改变，通常情况下Canvas会覆盖上一个图形。

Canvas：依赖分辨率，不支持事件处理器。可以保存PNG图片。最适合做游戏，做动画。

SVG：

SVG：不依赖分辨率，支持事件处理器。不可以保存图片。比较适合做地图更新。

1、矩形： rect

<rect width="300" height="300" style="stroke-width: 3px; stroke:blue;fill:red"></rect>

2、线段： line (x1,y1,x2,y2) 起始坐标 结束坐标

<line x1="100" y1="200" x2="450" y2="200" width="300" height="200" style="stroke:blue;stroke-width:3"></line>

3、文字：text

<text font-family="微软雅黑" font-size="100" x="100" y="150">H</text>

4、圆：circle

<circle cx="100" cy="100" r="50" fill="red"></circle>

5、椭圆：ellipse

<ellipse cx="横坐标" cy="纵坐标" rx="x轴长度" ry="y轴长度" fill="red">

6、折线： polyline

<polyline points="0,0,0,20 20,20 20,40 40,40" fill="red" stroke-width="3" stroke="orange"></polyline>

7、多边形：polygon 注意(x,y)表示每个角的坐标

<polygon points="100,10 40,180, 190,60 10,60 160,180" fill="red" stroke-width="3" stroke="orange"></polygon>

8、路径： path

SVG Animation : SMIL 结合形成动画。

SMIL: 同步多媒体集成的语言。

1、改变动画元素的数值属性 x y

2、动画属性变换(平移，旋转)

3、动画颜色属性改变

4、沿着特定路线走

1、<set> 闪现

<g>

<text font-family="微软雅黑" font-size="120" y="130" x="100">猴塞利<set attributeName="x" attributeType="XML" to="500" begin="2s"/> //attributeName 方向。attributeType 类型 to 移动距离 begin 几秒开始移动

</text>

</g>

2、<animate> 过渡效果

<g>

<text font-family="微软雅黑" font-size="50" y="130" x="100">猴

<animate attributeName="x" from="100" to="700" begin="0s"

dur="6s" repeatCount="indefinite"></animate>

//from 起始位置 to 结束位置 begin 多少秒后开始 dur 执行时间

repeatCount 重复次数 indefinite 为循环。

</text>

</g>

3、<animateTransform> 旋转等特定效果

<animateTransform from="0 160 160" to="360 160 160" attributeName="transform" begin="0s" dur="1s" type="rotate" repeatCount="indefinite"></animateTransform>

//from 起始角度 圆心角度

放大缩小，type=scale 注意：from=1 原始大小 to=倍数大小

<animateTransform attributeName="transform" from="1" to="30" begin="0s" dur="50s" type="scale" repeatCount="indefinite"></animateTransform>

4、<animateMotion> Path效果

沿着一个动画路径来移动元素

<animateMotion path="M10,150 L30,145   t100,-100 140,120    t160,0  180,70 t150,-120  " begin="0s" dur="3s" rotate="auto"repeatCount="indefinite"/>