canvas+SVG

canvas

画布坐标：

 canvas用于定义图形，在js脚本中可以通过canvas绘制盒子线，图，以及添加字符，
            默认宽300高150

SVG

SVG定义可缩放矢量图，可绘制框，图，文本，图形图像等操作
         优势：
         1.万维网的标准
         2.相比其他（JPEG，GIF，ico）图像文件来说，svg图像可以通过文本编辑器来创建和修改
         3.svg图像可以被浏览器搜索，索引，压缩
         4.可以伸缩

		 
		 
		 
		 
		 
		
		 
		 
		 
		 
		 查看矢量图

svg绘制矩形

        rect定义矩形
                属性：width height 分别表示矩形的宽度和高度

                            x y 表示从（x,y)坐标开始画
            样式属性：
                css的fill属性定义矩形的背景颜色，浏览器对rbg颜色解析方式更加友好
                stroke-width定义矩形边框的宽度
                stroke定义矩形边框的颜色
                fill-opacity设置填充色透明度（0-1），值越大透明度越低
                stroke-opacity边框透明度
                opacity整体的透明度

svg矩形
		
		 
		 

绘制圆角矩形

x y 从（x,y）坐标点开始画，rx,ry表示圆角的圆的弧度（可以自己试试）

圆角
		  

绘制圆形

cx,cy为圆心，r为圆的半径

⚪
		   

 

绘制椭圆

cx,cy为椭圆的中心点，rx,ry为椭圆的x轴 轴半径和y轴 轴半径

椭圆
			

 

 直线

x1,y1为直线起点  x2,y2为直线终点

直线