- SVG:矢量图，放大不会失真，适合大面积的贴图，通常动画较少或较简单。使用标签和CSS去画
canvas：适合用于小面积的绘图，适合动画
```html <style> .line1{ stroke:black; stroke-width:10px; } .line2{ stroke:red; stroke-width:5px; } .circle{ fill:transparent;/*填充色为透明*/ stroke:red;/*设置颜色*/ } .broken{ fill:transparent;/*填充色为透明*/ stroke:blueviolet;/*设置边线*/ stroke-width:3px;
stroke-opacity:.3;/*边线设置透明度*/ fill-opacity:.3;/*填充色透明度*/ stroke-linecap:butt;/*线两端样式：在原来的基础上，加上一段长度butt:不变;round:圆角;square:方角*/ stroke-linejoin:butt;/*线交汇样式：bevel:截断;round:圆角;mitter:不变*/ } polygon{ fill:transparent;/*填充色为透明*/ stroke:blueviolet;/*设置边线*/ stroke-width:3px; } text{ stroke:blue; stroke-width:3px; } path{ stroke:red; } </style> <svg width="500px" height="300px" style="border:1px solid"> <line x1="100" y1="100" x2="200" y2="100" class="line1"></line> <line x1="200" y1="100" x2="200" y2="200" class="line2"></line><!--画线，起始坐标，终止坐标-->
<rect height="50" width="100" x="0" y="0" rx="10" ry="10"></rect><!--画矩形，高、宽、起始坐标、圆角-->
<circle r="50" cx="50" cy="220" class="circle"></circle><!--画圆，半径、圆心坐标-->
<ellipse rx="100" ry="30" cx="400" cy="200"></ellipse><!--画椭圆，两个半径、一个圆心坐标-->
<polyline points="0 0, 50 50, 100 100, 100 50" class="broken"></polyline><!--折线：默认会连接填充-->
<polyline points="0 0, 50 50, 100 100, 100 50" class="broken"></polyline><!--折线：默认会填充，不会闭合-->
<polygon points="0 0, 50 50, 100 100, 100 50"></polygon><!--多边形：默认会填充并且闭合-->
<text x="50" y="50">hello world</text><!--文本，出现的位置-->
<text x="50" y="50">hello world</text><!--文本，出现的位置-->
<path d="M 100 100 L 200 100 l 100 100"></path><!--画线，M代表moveTo起点，L代表lineTo终点。 L代表绝对位置，l代表相对位置基于上一个点再移动的距离-->
<path d="M 100 100 H 200 V 200 100 Z"></path><!--H代表水平方向移动到200的位置，h代表水平方向移动200距离，V代表垂直方向的移动到200的位置，v代表垂直方向移动200距离，Z代表线要闭合-->
<path d="M 100 100 A 100 50 0 1 1 150 200"></path><!--画弧，M起点坐标两位，A x轴半径一位 y轴半径一位 旋转角度一位 长弧短弧一位 顺时针逆时针一位 终点坐标两位-->
<!--线性渐变begin--> <defs><!--定义一个线性渐变，用id值区分--> <linearGradient id="bg1" x1="0" y1="0" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,0)"></stop><!--关键点--> <stop offset="100%" style="stop-color:rgb(255,0,0)"></stop><!--关键点--> </linearGradient> </defs> <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect><!--为矩形引用线性渐变样式--> <!--线性渐变end-->
<!--高斯模糊(高斯滤镜)begin--> <defs><!--定义一个高斯模糊，用id值区分--> <filter id="gaussian"> <feGaussianBlur in="SourceGraphic" stdDeviation="20"></feGaussianBlur> </filter> </defs> <rect x="100" y="100" height="100" width="200" style="filter:url(#gaussian)"></rect><!--为矩形引用高斯模糊样式--> <!--高斯模糊(高斯滤镜)end--> </svg>
<!--虚线和简单动画begin--> <style> .line1{ stroke:black; stroke-width:10px; stroke-dasharray: 200px;/*设置为虚线*/ stroke-dashoffset:200px;/*设置虚线偏移量*/ animation:move 2s linear infinite alternate-reverse; } @keyframes move{ 0%{ stroke-dashoffset:200px; } 100%{ stroke-dashoffset:0px; } } </style> <svg width="500px" height="300px" style="border:1px solid"> <line x1="100" y1="100" x2="200" y2="100" class="line1"></line> </svg> <!--虚线和简单动画end-->
<!--比例尺begin--> <!--viewBox(开始坐标x,开始坐标y,横向表示距离（下面的250表示原来500px的距离现在是250px的距离，放大了两倍）,纵向表示距离--> <svg width="500px" height="300px" viewBox="0,0,250,150" style="border:1px solid"> <rect height="50" width="100" x="0" y="0" rx="10"></rect> </svg> <!--比例尺end--> ``` 以上是markdown格式的笔记