canvas

canvas标签是自定义图形 比如图形或者图标
但是canvas仅仅是一个容器 你必须使用脚本来绘制图形
这个元素是为客户端图形设计的 它自身是没有任何行为
但是我们可以通过js来实现图形的绘制 最终绘制在canvas画布上边
canvas绘图api
定义通过画布的getContext()方法来获取一个绘图的环境
canvas属性
width 宽度 px
height 高度 px
用来设置画布的宽度和高度 默认值是一个矩形（300*150）
canvas自身没有绘图能力 所有的绘图需要借助js来实现
创建画布
得到canvas的画布 var canvas=document.querySelector(“#canvas”);
现在的绘图环境为2d环境 var ctx = canvas.getContext(“2d”);
设置颜色 ctx.fillStyle = ‘green’;
绘制矩形 ctx.fillRect(100, 100, 200, 150);
fillStyle 改属性 可以是css颜色 渐变或者图案 默认值 #000
fillRect(x,y,width,height) 填充，里边有四个参数
前两个参数表示的当前矩形在画布中心x,y轴的位置 (当前图形左上角)
后两个参数表示的当前矩形的宽度和高度
strokeStyle 改属性可以是css颜色 渐变或者图形 描边
strokeRect(x,y,width,height) 无填充
里边有四个参数
前两个参数表示的当前矩形在画布中心x,y轴的位置 (当前图形左上角)
后两个参数表示的当前矩形的宽度和高度
clearRect(x,y,width,height) 在给定的矩形内清除指定的元素
x,y 代表当前矩形在画布中心x,y的位置
width height表示矩形宽度和高度
canvas绘制简单的一些图形 绘制直线
定义开始坐标和结束坐标
使用stroke()方法绘制线条
moveTo() 把路径移动到画布中的指定的点
lineTo() 添加一个点 在画布中创建从该点到原点指定点的线条
arc() 绘制一个圆 还可以绘制圆弧
arc(x,y,r, sAngle, eAngle, counterclockwise) x,y 定义了圆的圆心位置
r 表示圆的半径
sAngle 起始角
eAngle 结束角
counterclockwise 可选 规定了是以顺时针还是逆时针绘制圆
true 逆时针
false 顺时针
fill() 给当前图形进行填充
lineWidth 线的宽度
canvas绘制文本
font 定义字体
fillText(text, x, y) 填充字体，canvas上绘制实心的文本 绘制文字
text 表示的是绘制文本内容
fillStyle 字体颜色
strokeText(text, x, y) 空心字体
canvas上绘制空心的字体 描边字体
let canvas=document.getElementById(“demo”)
let ctx=canvas.getContext(“2d”)
ctx.font=”120px 微软雅黑”
ctx.fillStyle=”red”
ctx.fillText(“hello world”, 100, 300)
ctx.strokeStyle=”red”
ctx.lineWidth=3
ctx.strokeText(“hello world”, 100, 100)
实现椭圆
var canvas=document.querySelector(“canvas”)
var ctx=canvas.getContext(“2d”)
ctx.ellipse(200,200,100,50,0,0,.5*Math.PI,false)
ctx.fillStyle=”#fff”
ctx.fill()
ctx.strokeStyle=”blue”
ctx.lineWidth=5
ctx.stroke()

canvas绘制简单的一些图形

绘制直线 定义开始坐标和结束坐标
使用stroke()方法绘制线条
moveTo( ) 把路径移动到画布中的指定的点
lineTo( ) 添加一个点 在画布中创建从该点到原点指定点的线条
arc( ) 绘制一个圆 还可以绘制圆弧
arc(x,y,r, sAngle, eAngle, counterclockwise)
x,y 定义了圆的圆心位置
r 表示圆的半径
sAngle 起始角
eAngle 结束角
counterclockwise 可选 规定了是以顺时针还是逆时针绘制圆
true 逆时针
false 顺时针
fill( ) 给当前图形进行填充
lineWidth 线的宽度 
  1. <canvas id="canvas" width="500" height="500" style="margin: auto; border: 1px solid #ccc; display: block;"></canvas>
  2. <script>
  3.     let canvas = document.getElementById("canvas")
  4.     let ctx = canvas.getContext("2d")
  5.      ctx.moveTo(130,30)
  6.      ctx.lineTo(100,100)
  7.      ctx.stroke()
  8.     // 绘制三角形
  9.     ctx.moveTo(200,200)
  10.     ctx.lineTo(100,300)
  11.     ctx.lineTo(300,300)
  12.     ctx.lineTo(200,200)
  13.     ctx.stroke()
  14.     // 直角梯形
  15.     ctx.moveTo(50,50)
  16.     ctx.lineTo(200,50)
  17.     ctx.lineTo(300,200)
  18.     ctx.lineTo(50,200)
  19.     ctx.lineTo(50,50)
  20.     ctx.stroke()
  21.     // 绘制圆
  22.     ctx.moveTo(200,200)
  23.     ctx.lineTo(300,200)
  24.     ctx.lineTo(200,300)
  25.     ctx.lineTo(200,200)
  26.     ctx.arc(200, 200, 100, 0, 2 * Math.PI, false)
  27.     ctx.fillStyle = "#cb3232"
  28.     ctx.fill()
  29.     ctx.strokeStyle="#cb3232"
  30.     ctx.lineWidth = 10
  31.     ctx.strokeStyle = "green"
  32.     ctx.stroke()
  33.     ctx.beginPath()
  34. </script>

canvas绘制文本

font
定义字体		 fillText(text, x, y) 填充字体
canvas上绘制实心的文本 绘制文字
text 表示的是绘制文本内容
fillStyle
字体颜色		 strokeText(text, x, y) 空心字体
canvas上绘制空心的字体 描边字体		 
  1. <canvas width="1500" height="800" id="demo"></canvas>
  2. <script>
  3.     let canvas=document.getElementById("demo")
  4.     let ctx=canvas.getContext("2d")
  5.     ctx.font="120px 微软雅黑"
  6.     ctx.fillStyle="red"
  7.     ctx.fillText("hello world", 100, 300)
  8.     ctx.strokeStyle="red"
  9.     ctx.lineWidth=3
  10.     ctx.strokeText("hello world", 100, 100)
  11. </script>

canvas绘制椭圆

elipse(x,y,radiusX,radiusY,rotation,startAngle, endAngle,anticlockwise)\
x,y 圆心坐标
radiusX,radiusY 半径x 半径y
rotation 旋转角度
startAngle 起始角度
endAngle 结束角度
anticlockwiseanticlockwise 顺时针或者逆时针旋转 
  1. <canvas width="1000" height="500" style="border: 1px solid red;"></canvas>
  2. <script>
  3.     var canvas=document.querySelector("canvas")
  4.     var ctx=canvas.getContext("2d")
  5.     ctx.ellipse(200,200,100,50,0,0,.5*Math.PI,false)
  6.     ctx.fillStyle="#fff"
  7.     ctx.fill()
  8.     ctx.strokeStyle="blue"
  9.     ctx.lineWidth=5
  10.     ctx.stroke()
  11. </script>

canvas绘制贝赛尔曲线(就是数学中抛物线)

二次方贝赛尔曲线 quadraticCurveTo(cpx,cpy,x,y)
cpx,cpx 第一个点用于贝塞尔曲线的控制点x y坐标
x,y 结束点x,y坐标
曲线的开始是当前路径的最后一个点
如果路径不存在可以使用beiginPath()和moveTo()来定义开始点
三次方贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 里边有三个点
第一个点/第二个点事用于三次方贝塞尔曲线的控制点
x y 表示结束点的位置
曲线的开始是当前路径的最后一个点
如果路径不存在可以使用beiginPath()和moveTo()来定义开始点		 
  1. <canvas width="1000" height="800" id="demo" style="border: 1px solid red;"></canvas>
  2. <script>
  3.     var canvas=document.getElementById("demo")
  4.     var ctx=canvas.getContext("2d")
  5.    ctx.beginPath()
  6.    ctx.moveTo(0,0)
  7.    ctx.bezierCurveTo(40,150,20,130,200,300)
  8.    ctx.stroke()
  9.    ctx.beginPath()
  10.    ctx.moveTo(50,0)
  11.    ctx.bezierCurveTo(40,-150,100,400,200,20)
  12.    ctx.stroke()
  13.    ctx.beginPath()
  14.    ctx.moveTo(0,0)
  15.    ctx.bezierCurveTo(150,500,300,-300,500,200)
  16.    ctx.stroke()
  17.    哆啦A梦左半边胡子
  18.    ctx.beginPath()
  19.    ctx.moveTo(100,120)
  20.    ctx.bezierCurveTo(20, 60, 40, 200, 200, 170)
  21.    ctx.stroke()
  22.     ctx.beginPath()
  23.     ctx.moveTo(50,0)
  24.     ctx.quadraticCurveTo(-200,100,200,150)
  25.     ctx.stroke()
  26.     // 头
  27.     ctx.beginPath()
  28.     ctx.ellipse(500,300, 150, 135, 0, 2*Math.PI/3, Math.PI/3, false)
  29.     ctx.fillStyle="#84C2F1"
  30.     ctx.fill()
  31.     ctx.stroke()
  32.     // 脸
  33.     ctx.beginPath()
  34.     ctx.ellipse(500,332, 130, 105, 0, 2*Math.PI/3/12*12.4, Math.PI/3/6*5.6, false)
  35.     ctx.fillStyle="#fff"
  36.     ctx.fill()
  37.     ctx.stroke()
  39.     // 左眼睛
  40.     ctx.beginPath()
  41.     ctx.ellipse(460,232, 30, 40, Math.PI/18, 0, 2*Math.PI, false)
  42.     ctx.fillStyle="#fff"
  43.     ctx.fill()
  44.     ctx.lineWidth=3
  45.     ctx.stroke()
  46.     // 右眼睛
  47.     ctx.beginPath()
  48.     ctx.ellipse(522,232, 30, 40, -Math.PI/18, 0, 2*Math.PI, false)
  49.     ctx.fillStyle="#fff"
  50.     ctx.fill()
  51.     ctx.lineWidth=3
  52.     ctx.stroke()
  53.     // 眉毛
  54.     ctx.beginPath()
  55.     ctx.moveTo(450,195)
  56.     ctx.quadraticCurveTo(485,240,523,195)
  57.     ctx.lineWidth=3
  58.     ctx.stroke()
  59. </script>

canvas绘制图像

图像放置在画布上
drawImage(image, x, y)
image 表示要放置的图像
x,y 表示的是图像的坐标位置
width 使用图像 视频的宽度
height 使用图像 视频的高度
width height是可选参数 可以写也可以不写 设置当前绘制图像宽高
使用canvas来绘制图像的时候 我们需要知道后边写出来的图形层级高于前边所写图像的层级		 
  1. <img src="./img/1.jpg" alt="" style="width: 100px;">
  2. <canvas width="1000" height="800" style="border: 1px solid red;" id="canvas"></canvas>
  3. <script>
  4.     var canvas=document.getElementById("canvas")
  5.     var ctx=canvas.getContext("2d")
  6.     var img=document.querySelector("img")
  7.     window.onload=function() {
  8.        ctx.drawImage(img, 100, 100)
  10.        ctx.drawImage(img, 300, 300)
  11.        ctx.drawImage(img, 200, 200)
  12.     }
  13. </script>

贝赛尔曲线

canvas绘制贝赛尔曲线(就是数学中抛物线)
二次方贝赛尔曲线
quadraticCurveTo(cpx,cpy,x,y)
cpx,cpx 第一个点用于贝塞尔曲线的控制点x y坐标
x,y 结束点x,y坐标
曲线的开始是当前路径的最后一个点
如果路径不存在可以使用beiginPath()和moveTo()来定义开始点
三次方贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
里边有三个点
第一个点/第二个点事用于三次方贝塞尔曲线的控制点
x y 表示结束点的位置
曲线的开始是当前路径的最后一个点
如果路径不存在可以使用beiginPath()和moveTo()来定义开始点
绘制图像
将图像放置在画布上
drawImage(image, x, y)
image 表示要放置的图像
x,y 表示的是图像的坐标位置
width 使用图像 视频的宽度
height 使用图像 视频的高度
width height是可选参数 可以写也可以不写 设置当前绘制图像宽高
使用canvas来绘制图像的时候 我们需要知道后边写出来的图形层级高于前边所写图像的层级
var canvas=document.getElementById(“canvas”)
var ctx=canvas.getContext(“2d”)
var img=document.querySelector(“img”)
window.onload=function() {
ctx.drawImage(img, 100, 100)
ctx.drawImage(img, 300, 300)
ctx.drawImage(img, 200, 200)
}		 
  1. <svg width="1000" height="500" style="border: 1px solid red;"> 
  2.          <!-- path路径 -->
  3.   <path d="M150 0 L75 200 L225 200 Z" />
  5.          <!-- <path d="M100 100 L200 100 L200 150 L100 150 Z" fill="none" stroke="#333" stroke-width="3"> -->
  7.             <!-- <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  8.             stroke-width="3" fill="none" /> -->
  9.             <!-- <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  10.             stroke-width="3" fill="none" /> -->
  11.             <!-- <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  12.             fill="none" /> -->
  13.             <!-- <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  14.             stroke-width="5" fill="none" /> -->
  15.             <!-- Mark relevant points -->
  16.             <!-- <g stroke="black" stroke-width="3" fill="black">
  17.                 <circle id="pointA" cx="100" cy="350" r="3" />
  18.                 <circle id="pointB" cx="250" cy="50" r="3" />
  19.                 <circle id="pointC" cx="400" cy="350" r="3" />
  20.             </g> -->
  21.             <!-- Label the points -->
  22.             <!-- <g font-size="30" font="sans-serif" fill="black" stroke="none"
  23.             text-anchor="middle">
  24.                 <text x="100" y="350" dx="-30">A</text>
  25.                 <text x="250" y="50" dy="-10">B</text>
  26.                 <text x="400" y="350" dx="30">C</text>
  27.             </g> -->
  30.          <!-- 北斗七星 -->
  31.          <!-- <polyline points="50,300,150,210,240,230,350,260,420,350,520,330,530,190" stroke="#333" stroke-width="3" fill="none"></polyline> -->
  32.          <!-- 折线 -->
  33.          <!-- <polyline points="10,10, 100,180, 400, 10" stroke="#333" fill="none"></polyline> -->
  34.          <!-- 多边形 -->
  35.          <!-- <polygon points="50, 50, 50, 100, 100, 100" fill="none" stroke="#333"></polygon> -->
  36.          <!-- <polygon points="100,100,150,150,125,200,75,200,50,150" fill="none" stroke="#333"></polygon>
  37.          <circle cx="100" cy="150" r="4" stroke="#333" stroke-width="2" fill="none"></circle>
  38.          <line x1="100" y1="160" x2="100" y2="200" stroke="#333" stroke-width="3"></line> -->
  39.          <!-- <rect x="100" y="100" rx="0" ry="0" width="200" height="100" fill="red" stroke="blue" stroke-width="2"></rect> -->
  40.          <!-- <circle cx="240" cy="240" r="50" fill="none" stroke="red" stroke-width="20"></circle> -->
  41.          <!-- <line x1="50" y1="50" x2="300" y2="300" stroke="red" stroke-width="20"></line>
  42.         <line x1="49" y1="49" x2="120" y2="120" stroke="yellow" stroke-width="21"></line>
  43.         <line x1="230" y1="230" x2="301" y2="301" stroke="yellow" stroke-width="21"></line> -->
  45.         <!-- 三角形 -->
  46.         <!-- <line x1="50" y1="50" x2="50" y2="100" stroke="#333"></line>
  47.         <line x1="50" y1="100" x2="100" y2="100" stroke="#333"></line>
  48.         <line x1="100" y1="100" x2="50" y2="50" stroke="#333"></line> -->
  50.         <!-- 西瓜 -->
  51.         <!-- <circle r="100" cx="200" cy="200" fill="none" stroke="green" stroke-width="10"></circle>
  52.         <circle r="90" cx="200" cy="200" fill="#FF4D4E"></circle>
  53.         <rect x="170" y="170" width="10" height="5" rx="50%" ry="50%"></rect>
  54.         <rect x="190" y="170" width="10" height="5" rx="50%" ry="50%"></rect>
  55.         <rect x="140" y="210" width="10" height="5" rx="50%" ry="50%"></rect>
  56.         <rect x="200" y="230" width="10" height="5" rx="50%" ry="50%"></rect>
  57.         <rect x="240" y="150" width="10" height="5" rx="50%" ry="50%"></rect>
  58.         <rect x="200" y="200" width="10" height="5" rx="50%" ry="50%"></rect>
  59.         <rect x="200" y="190" width="10" height="5" rx="50%" ry="50%"></rect> -->
  61.         <!-- 椭圆 -->
  62.         <!-- <ellipse cx="200" cy="200" rx="50" ry="80" fill="" stroke="red" stroke-width="3"></ellipse> -->
  63.      <!-- </svg> -->
  64.      <svg width="1800" height="1000" xmlns="http://www.w3.org/2000/svg">
  65.          <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(-45)"></ellipse>
  66.          <ellipse cx="300" cy="300" rx="50" ry="100" transform="translate(400)"></ellipse>
  67.          <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(45)"></ellipse>
  68.          <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(90)"></ellipse>
  70.         <!-- <rect width="300" height="100" x="50" y="50" rx="0" ry="0" transform="rotate(70)"></rect> -->
  72.         <!-- <g id="Layer_1">
  73.             <title>Layer 1</title>
  74.             <path id="svg_1" d="m186,165c1,0 62,64 131,1" opacity="NaN" stroke="#000" fill="none"/>
  75.            </g> -->
  76.        </svg>

canvas动画过程

******************************清屏-更新-渲染******************************
//得到canvas的画布
var canvas = document.querySelector("#canvas");
//得到画布的上下文，上下文有两个，2d的上下文和3d的上下文
var ctx = canvas.getContext("2d");
//设置颜色
ctx.fillStyle = 'green';
//信号量
var left=100;
//动画过程
setInterval(function() {
    //清除画布，0,0代表从什么位置开始清楚，600,600代表清楚地宽度和高度
    ctx.clearRect(0,0,600,600);
    //更新信号量
    left++;
    ctx.fillRect(left,100,100,100)
},10)
//绘制矩形
console.log(ctx);

svg介绍

svg svg是基于xml描述矢量图形格式
xml是可扩展的标记语言
xml用于存储和传输数据
svg优势 可以被更多的工具读取或者修改
与jpg gif图像比起来 体积更小 可压缩性较强
图像可以在任何分辨率被高质量打印
该图形中文本是可选的
svg可以配合java python等语言一起使用
svg是纯xml
位图和矢量图 矢量图不管放多大 永远不失帧(ai corl)
位图在放大到一定程度时候 就会失帧 图像变得模糊(ps)
如何使用svg
在浏览器中打开
在html中有一个svg标签
svg定义形状元素 rect 矩形
x y 对应当前矩形的xy坐标
rx ry 对应矩形边角半径弧度
fill 填充背景颜色 如果不想有背景颜色 设置为none
stroke-width设置描边宽度
circle 圆形 r 表示半径
cx cy 表示圆心坐标
line 线段 x1 y1 起始点
x2 y2 结束点
ellipse 椭圆形 cx cy 圆心
rx ry 水平垂直方向半径
polygon 绘制多边形
polyline 折线 points表示当前图形里边的点坐标
points=”x1 y1 x2 y2 x3 y3….”
path 路径 path元素是svg基本图形中最强大的一个
它不仅可以创建其他基本图形 还可以创建一些其他更多形状
path元素形状需要通过属性定义 属性值是 属性+命令 来进行设置
用于路径数据基本命令
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
一般比较复杂的图形我们都会使用svg编辑器来进行实现
https://c.runoob.com/more/svgeditor/
fill
storke
store-width
transform 旋转角度rotate在使用时候 不能加deg
transform=”rotate(70)”
stroke 描边 stroke-width 设置描边宽度
circle 圆形
r 表示半径
cx cy 表示圆心坐标		 



<svg width="1000" height="500" style="border: 1px solid red;">
<!-- path路径 -->
<path d="M150 0 L75 200 L225 200 Z" />
<path d="M100 100 L200 100 L200 150 L100 150 Z" fill="none" stroke="#333" stroke-width="3">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
    <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
    <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
    <!-- Mark relevant points -->
    <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
    </g>
    <!-- Label the points -->
    < <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
        </g>
        <!-- 北斗七星 -->
        <polyline points="50,300,150,210,240,230,350,260,420,350,520,330,530,190" stroke="#333" stroke-width="3"
            fill="none"></polyline>
        <!-- 折线 -->
        <polyline points="10,10, 100,180, 400, 10" stroke="#333" fill="none"></polyline>
        <!-- 多边形 -->
        <polygon points="50, 50, 50, 100, 100, 100" fill="none" stroke="#333"></polygon>
        <polygon points="100,100,150,150,125,200,75,200,50,150" fill="none" stroke="#333"></polygon>
        <circle cx="100" cy="150" r="4" stroke="#333" stroke-width="2" fill="none"></circle>
        <line x1="100" y1="160" x2="100" y2="200" stroke="#333" stroke-width="3"></line>
        <rect x="100" y="100" rx="0" ry="0" width="200" height="100" fill="red" stroke="blue" stroke-width="2">
        </rect>
        <circle cx="240" cy="240" r="50" fill="none" stroke="red" stroke-width="20"></circle>
        <line x1="50" y1="50" x2="300" y2="300" stroke="red" stroke-width="20"></line>
        <line x1="49" y1="49" x2="120" y2="120" stroke="yellow" stroke-width="21"></line>
        <line x1="230" y1="230" x2="301" y2="301" stroke="yellow" stroke-width="21"></line>
        <!-- 三角形 -->
        <line x1="50" y1="50" x2="50" y2="100" stroke="#333"></line>
        <line x1="50" y1="100" x2="100" y2="100" stroke="#333"></line>
        <line x1="100" y1="100" x2="50" y2="50" stroke="#333"></line>
        <!-- 西瓜 -->
        <circle r="100" cx="200" cy="200" fill="none" stroke="green" stroke-width="10"></circle>
        <circle r="90" cx="200" cy="200" fill="#FF4D4E"></circle>
        <rect x="170" y="170" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="190" y="170" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="140" y="210" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="200" y="230" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="240" y="150" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="200" y="200" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="200" y="190" width="10" height="5" rx="50%" ry="50%"></rect>
        <!-- 椭圆 -->
        <ellipse cx="200" cy="200" rx="50" ry="80" fill="" stroke="red" stroke-width="3"></ellipse> -->
        <!-- </svg> -->
        <svg width="1800" height="1000" xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(-45)"></ellipse>
            <ellipse cx="300" cy="300" rx="50" ry="100" transform="translate(400)"></ellipse>
            <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(45)"></ellipse>
            <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(90)"></ellipse>
            <rect width="300" height="100" x="50" y="50" rx="0" ry="0" transform="rotate(70)"></rect>
            <g id="Layer_1">
                <title>Layer 1</title>
                <path id="svg_1" d="m186,165c1,0 62,64 131,1" opacity="NaN" stroke="#000" fill="none" />
            </g>
        </svg>

svg分组

g 分组 是group缩写
 通常使用来对我们相关图形进行分组
可以直接编写使用 显示对应分组图形
想要使用g标签 必须在标签上边设置一个id 通过id引用
注意在id的前边添加一个#
use
该元素就是进行元素重写
实现了svg现有图形的重用 可以重用单个svg元素 也可以重用g标签定义的图形元素
格式：
在被引用的元素上边添加一个id属性
<被引用的元素标签 id=”自定义名字”></被引用的元素标签>
在需要使用的地方 使用use标签来进行引用
defs
 重用已存储的元素
用于预定义一个元素使其能够在svg图形中重复使用 在该元素中定义的图形不会直接在svg上边显示
要显示它们 我们需要使用use标签引入它们
g和defs
 两者都拥有存储元素的能力 但是区别在于 g在存储之后可以直接显示 而defs不显示
引用时候 我们可以对一整个g分组的元素一次性全部引用显示
但是defs不可以 只能引用当前存储里边的某一个元素		 
 <svg width="1000" height="1000" style="border: 1px solid red;">
     <g>
         <rect width="100" height="50" x="50" y="50"></rect>
         <circle cx="200" cy="200" r="50" id="demo"></circle>
     </g>

     <defs>
         <rect width="100" height="50" x="50" y="50" id="demo"></rect>
         <circle cx="200" cy="200" r="50" id="demo1"></circle>
     </defs>

     <use xlink:href="#demo" x="100" y="200" transform="translate(100)" fill="red" stroke="blue"></use>
     <use xlink:href="#demo" x="300" y="200" transform="translate(100)" fill="blue" stroke="blue"></use>
     <use xlink:href="#demo" x="500" y="200" transform="translate(100)" fill="green" stroke="blue"></use>
     <use xlink:href="#demo" x="100" y="400" transform="translate(100)" fill="yellow" stroke="blue"></use>
     <use xlink:href="#demo" x="200" y="400" transform="translate(100)" fill="pink" stroke="blue"></use>

     <rect width="100" height="50" x="50" y="50" id="rect"></rect>

     <use xlink:href="#rect" x="100" y="200" fill="red"></use>
     <use xlink:href="#rect" x="50" y="200" fill="blue"></use>
     <use xlink:href="#rect" x="80" y="100"></use>
     <use xlink:href="#rect" x="200" y="200"></use>
     <use xlink:href="#rect" x="300" y="200"></use>

     <rect width="100" height="50" x="150" y="350" fill="red"></rect>
 </svg>

svg描边动画

svg方法动画
requestAnimationFrame
1 经过浏览器优化 动画可以更加流程
2 浏览器没有被激活时 动画会暂停 省去了计算时间
3 对移动端更加友好 省电
使用方法格式
function animate() {
requestAnimationFrame(animate) // animate就是对应的function函数
}
我们可以使用requestAnimationFrame启动动画 同时可以使用cancelAnimationFrame()取消动画		 
<p>0</p>
<script>
    var p = document.querySelector("p")
    var t = setInterval(() => {
        p.innerHTML = parseInt(p.innerHTML) + 1
        if (p.innerHTML >= 80) {
            p.innerHTML = 80
            clearInterval(t)
        }
    }, 100)

    var p = document.querySelector("p")
    function txt() {
        var percent = parseInt(p.innerHTML) + 1
        p.innerHTML = percent + "%"
        var t = requestAnimationFrame(txt)
        if (percent >= 80) {
            cancelAnimationFrame(t)
        }
    }
    txt()
</script>

svg实现圆弧的动画绘制

svg绘制动态圆弧
描边特殊属性
stroke-dasharray
数项是虚线长度
偶数项表示间隙的宽度
例如：
stroke-dasharray: 10, 20, 30, 40
troke-dashoffset
表示虚线样式内虚线开始处距离		 
<svg width="1500" height="800" style="border: 1px solid red">
   <path id="svg_1" d="m294,201c0,0 91,110 185,-3" opacity="NaN" stroke="#000" fill="#fff"/>
   <!-- <circle cx="100" cy="200" r="50" fill="none" stroke="red" stroke-width="5"></circle> -->
</svg>
<script>
    var circle=document.querySelector("path")
    setTimeout(()=> {
        circle.style.strokeDasharray="235.5, 78.5"
        circle.style.strokeDashoffset="0"

    }, 1000)
</script>

svg实现圆环进度条

text 在svg中绘制文本
x y 文本在svg坐标位置		 
<style>
    circle {
        stroke-dasharray: 628;
        stroke-dashoffset: 628;
        transition: all 1.5s;
    }
</style>
<script>
    var circle = document.querySelector("circle")
    var txt = document.querySelector("text")
    setTimeout(() => {
        circle.style.strokeDashoffset = "157"
    }, 0)
    function txt1() {
        var percent = parseInt(txt.innerHTML) + 1
        txt.innerHTML = percent + "%"
        var timer = requestAnimationFrame(txt1)
        if (percent >= 75) {
            txt.innerHTML = 75 + "%"
            cancelAnimationFrame(timer)
        }
    }
    txt1()
</script>

视频video和音频audio

视频video

视频video 视频格式
mp4
ogg
flv
webM
video标签 src 视频路径
width 视频窗口宽度
height 视频窗口的高度
autoplay 控制视频自动播放
loop 视频循环播放
controls 显示视频控制组件
muted 控制静音
poster 它的值是一个url 显示视频截图封面
方法：
play() 播放
pause() 暂停
load() 加载
conplayType 错误信息
webkitRequestFullScreen() 全屏播放
timeupdate() 实时监听当前视频播放的进度 进行相关的代码操作
currentTime 获取当前播放的时间进度
muted 改属性的值为布尔值 当设置为true时候我们可以让当前媒体对象静音		 
<script>
var play = document.querySelector("#play")
var pause = document.querySelector("#pause")
var video = document.querySelector("video")
var full = document.querySelector("#full")
var img = document.querySelector("img")
var muted = document.querySelector("#muted")
play.onclick = function () {
    video.play()
}
pause.onclick = function () {
    video.pause()
}
muted.onclick = function () {
    console.log(video)
    video.muted = true
}
 full.onclick=function() {
     video.webkitRequestFullScreen()
 }
video.ontimeupdate=function() {
    console.log(video.currentTime)
    if(video.currentTime>=1.5) {
        video.pause()
        // alert("买会员")
        img.style.display="block"
    }
}
</script>

音频audio