canvas
画图 位图
兼容性:高级浏览器
svg
矢量图 兼容性:高级浏览器
画图的本质是标签
stroke 线的颜色
stroke-width 线的宽度
注:线宽还是从两边扩展
样式可以用
属性<*<标签<class<id<行间
标签不区分大小写
line 可以写成单标签,也可以不闭合,但是多个但标签一起必须闭合
配合js
获取元素没任何问题
操作属性:不能用.和[]只能用Attribute
矩形:
<rect x="100" y=" 100" width="200" height="100"></rect>
fill 填充色
rx ry 圆角
svg常用的属性
stroke 线的颜色
stroke-width 线宽
fill 填充色
fill='none' 去掉填充色
fill-opacity
stroke-opacity
端点
stroke-linecap="square"
stroke-linecap="round"
stroke-linecap="butt" 默认值
虚线
stroke-dasharray="10"
stroke-dasharray="10,20"
stroke-dasharray="10,20,30"
运动
transition:1s all ease