svg与canvas画图以及其他的html5元素

html5与js

媒体文件

<audio>
<video>
    src定义路径   autoplay自动播放    controls显示控件

表单

<p><input type="date"></p>   年月日
<p><input type="month"></p>  年月
<p><input type="time"></p>   时分秒
<p><input type="week"></p>   一年中的第几周
<p><input type="color"></p>  调色板
<p><input type="number" min="30" max="80" step="5"></p>   必须输入数字
<p><input type="range" id="id01" onchange="fun()"min="30" max="80" step="5"></p>  滚动条
<h1 id="show"></h1> 
<p><input type="emall" placeholder="请填邮箱" required></p>  邮箱，提示语，必输项
<p><input type="tel" placeholder="请填手机号"></p>           电话号，提示语，必输项
<p><input type="submit"></p>

布局
<header></header> 头部
<section>         正文
    <nav></nav>   菜单
    <article></article>  文章
    <aside></aside> 旁边
</section>
<footer></footer>  尾部

画图

区别:1、svg是伸缩矢量图形，canvas会依赖分辨率
     2、svg可以存成图片和字体文件格式，canvas必须与js连用
     3、svg可以被搜索，canvas可以嵌入图片
     4、svg可以放大缩小不失真，canvas可以制作动画和3d
     5、svg画图标，canvas可以画动画，地图，游戏等

svg

   1、创建画布
   <svg></svg>
   2、画直线
      <line x1="10" y1="10" x2="100" y2="100" stroke="red" stroke-width="3"></line>
      x1和y1是起始坐标，x2和y2是终止坐标 stroke线体颜色 stroke-width线体粗细

      矩形
      <rect x="50" y="50" width="200" height="200" 
      fill="red" stroke="black" stroke-width="3"
      rx="100" ry="100"></rect>
      x和y起始坐标，width宽度height高度 fill背景色 rx和ry设置圆角

      圆
      <circle cx="150" cy="150" r="80" fill="blue"></circle>
      cx和cy是中心点坐标 r是半径

      椭圆
      <ellipse cx="150" cy="150" rx="100" ry="50"></ellipse>
      cx和cy是中心点坐标 rx是水平半径 ry是垂直半径

      多边形
      <polygon points="150,0 0,150 300,150"></polygon> 
      标注所有点坐标，写作:x1,y1 x2,y2......

      路径
       M移动到 L直线连接 C曲线连接 S平滑曲线连接 Q二次贝塞尔曲线 Z封闭图形 T平滑贝塞尔曲线
       <path d="M0 150 S300 150 150 0"></path>
       所有点坐标以空格分割，再坐标轴前标出线体类型

canvas

      创建画布
      <canvas width="400px" height="300px" id="can1"></canvas>
      var can1=document.getElementById("can1")
      创建画笔
      var txt1=can1.getContext("2d")
      画线
      txt1.lineWidth=5 线体粗细
      txt1.strokeStyle="red" 线体颜色
      txt1.moveTo(50,50) 线体起始点
      txt1.lineTo(300,300) 线体终止点
      txt1.stroke() 连成线
      二次曲线
      txt1.moveTo(0,200)
      txt1.quadraticCurveTo(200,0,400,200)(x1,y1,x2,y2)
      贝塞尔曲线
      txt1.moveTo(100,0)
      txt1.bezierCurveTo(0,250,400,150,300,300)
      矩形
      txt1.fillStyle="green" 设置背景色
      txt1.strokeRect(50,50,200,100)线体矩形
      txt1.fillRect(150,150,200,100) 填充矩形
      值：x轴，y轴 宽度 高度
      圆形
      txt1.arc(200,150,150,0,Math.PI*2,true)
      值的顺序：xy轴中心点坐标，半径，起始位置，终止位置，true为逆时针画                      
      三角形                            
      txt1.moveTo(200,0)                    
      txt1.lineTo(0,150)                       
      txt1.lineTo(400,150)                      
      txt1.lineTo(200,0)                        
      txt1.stroke()//起点和终止点位置一样才是闭合的图形                                 
      txt1.stroke()线体三角形                                  
      txt1.fill()填充三角形     

设置文字
       空心文字
       txt.font="50px 楷体 "
       txt.strokeText("看看文字效果",100,100)
       txt.strokeText(内容,x,y)

       实心文字
       txt.font="50px 楷体 "
       txt.fillText("看看文字效果",100,100)
       txt.fillText(内容,x,y)

设置图片    
       var img=new Image()
       img.src="img/sxsj1.jpg"
       img.onload=function(){ 
            txt.drawImage(img,0,0,can.offsetWidth,can.offsetHeight)
       }

开始和结束画笔
        beginPath()开始画笔
        closePath()结束画笔
        解决的事情:当画多个图形，图形会一笔画出有多余的线体，或者样式一样，都会加载最后一个图形的样式
        所以给所画的图形设置两个函数
保存和重置
        save()保存
        restore()重置
        解决的事情:当画多个图形，其中一个图形想应用前面图形的样式，可以再前面图形设置保存
        当前图形绘制一模一样的样式
图形组合
        con.globalCompositeOperation=""设置组合方式
        组合方式
        source-over 绘制两个图形，新图形在上
        destination-over 绘制两个图形，旧图形在上
        source-atop 绘制旧图形和新图形的重叠部分
        destination-atop 绘制新图形和旧图形的重叠部分
        source-in 只绘制两个图形的重叠部分，显示新图形的颜色destination-in只绘制两个图形的重叠部分，显示旧图形的颜色source-out 绘制新图行没有重叠的部分
        destination-out 绘制旧图行没有重叠的部分
        lighter 绘制两个图形，重叠部分进行加色处理
        darker 绘制两个图形，重叠部分进行减色处理
        copy 只绘制新图形
        xor 给制两个图形 重鱼部公本透明

透明色
      globalAlphas设置透明度()0-1之间的值
阴影
      shadowOffsetX水平距离
      shadowOffsetY垂直距离
      shadowBlur模糊效果
      shadowColor阴影文字
变换
      translate(x,y)
      scale(x,y)缩放
      rotate()旋转
      transform(宽度,水平扭曲,垂直扭曲,高度,水平移动,垂直移动)矩阵
渐变色
      线性渐变
      var line=txt.createLinearGradient(x1,y1,x2,y2)
      line.addColorStop(0,"red")   //位置为0-1之间添加颜色
      line.addColorStop(0.5,"yellow")
      txt.fillStyle=line  //填充到背景
      txt.fillRect(0,0,500,500)

      径向渐变
      var rad=txt.createRadialGradient(250,250,50,250,250,100)
      值的顺序:内圆中心点x，y轴，内圆半径，外圆中心点x，y轴，外圆半径
      rad.addColorStop(0,"yellow")
      rad.addColorStop(0.5,"red")
      txt.fillStyle=rad
      txt.arc(250,250,100,0,Math.PI*2,false)
      txt.fill()

其他
      clip()裁切
      clearRect(x,y,width,height)清除

媒体操作
      属性和方法
      1、src路径
      2、controls 是否显示控件，为true显示控件
      3、autoplay 是否自动播放
      4、play()   在暂停处播放
      5、pause() 暂停
      6、load()   从头播放
      7、paused   判断是否暂停，true为暂停
      8、ended    判断是否停止，true为停止
      9、muted    获取或修改静音，true为静音
      10、volume  设置声音大小，0-1之间
      11、playbackRate 设置播放速度，1-5之间
      12、duration 总时长
      13、currentTime 当前播放位置
      14、startTime开始播放时间
      16、error   返回错误对象