html svg canvas图片,HTML5之SVG绘图

1.svg绘图与canvas绘图的区别

cnavas绘图

svg绘图

类型

2D位图(放大会失真)

2D矢量图(放大不会失真)

绘图方式

使用JS代码绘图

使用标签绘图

事件绑定

每个图形不是元素，无法直接绑定事件

每个图形都是元素，可以直接绑定事件监听

应用场合

游戏；特性

图标；地图

2.svg绘图在H5中使用方法

直接在HTML5文档，使用SVG标准

默认一个300*150 inline-block

矩形

圆形

椭圆

直线

折线

多边形

3.矩形

fill-opacity="" stroke="" stroke-width="" stroke-opacity="">

练习：在SVG画布正中央创建30*300矩形柱，初始淡红色(#faa)和深红色(#800)边框都半透明，鼠标悬停时，变为不透明.

提示:修改HTML属性用setAttribute();

fill="#faa" fill-opacity="0.3" stroke="#800" stroke-opacity="0.3">

r2.onmousemove = function(){

this.setAttribute("fill-opacity",1);

this.setAttribute("stroke-opacity",1);

}

r2.onmouseout = function(){

this.setAttribute("fill-opacity",0.3);

this.setAttribute("stroke-opacity",0.3);

}

4.圆形

5.椭圆

rx:水平半径

ry:垂直半径

6.直线

7.折线

一条折线上可以有任意多个连续点，多个点之间用空格隔开

8.多边型

多个点之间用空格隔开

9.文本

文本内容

10.图像

11.渐变对象

定义特效对象:渐变对象定义标签内

linearGradient>

调用渐变对象

12.滤镜

--模糊度

标签：opacity,SVG,setAttribute,绘图,HTML5,svg,折线

来源： https://www.cnblogs.com/hourglas/p/14237463.html