H5API
时间：2023-04-05 12:47:13
HTML5
H5API**HTML5新特性标签：navarticlefooterheaderaside.....新表单特性：inputtypevaluedatetimeweekemailnumberFormattributeformformaction(submitaddress)frommethod(submitmethod)requiredreadonlydisabled表单控件标签：进度表datalist1.H5API（HTML5的js部分）在HTML5出现之前，要在网上播放视频、音频、动画，除了使用第三方自研播放器外，使用最多的广泛使用的工具是Flash，但是需要在浏览器上安装各种插件，有时速度很慢。HTML5新增了两个与媒体相关的标签，允许开发者在不依赖任何插件的情况下，在网页中嵌入跨浏览器的音频和视频内容。这两个标签分别是
1.2媒体元素1.video在video标签出现之前，在网页中播放视频或音频数据是非常困难的。H5中的video标签可以简单到用img显示图片播放视频。video提供了很多属性和方法，我们可以直接通过js读写属性来设置或者控制视频的显示loopplaybackautoplay是自动播放poster=''把封面放在封面地址mutedmutemethodplayplaypause暂停开关，是否处于暂停状态音量控制音量currentTime当前播放秒数playbackRate倍速播放1.属性1。进度条控件
2.autoplay是否在页面加载时自动播放3.postcover4.是否循环loop5.muted静音2.方法1.playplayvarvideo=$('video')[0];if($(this).text()==='play'){video.play()}2.暂停pauseif($(this).text()==='pause'){video.pause()}3.Togglepaused音频视频暂停if($(this).text()==='switch'){if(video.paused){video.play()}else{video.pause()}}4.//控制音量+if($(this).text()==='volume+'){video.volume=(video.volume>0.9?0.9:video.volume)+0.1}5.if($(this).text()==='volume-'){video.volume=(video.volume<0.1?0.1:video.volume)-0.1}6.//快进if($(this).text()==='快进'){video.currentTime+=5}7.//回滚if($(this).text()==='rollback'){video.currentTime-=5}8.//多次播放if($(this).text()==='倍速播放'){video.playbackRate=0.5}3.事件video.onvolumechange=function(){//console.log('音量变化事件监听')if(this.volume===0.5){alert('继续增大音量会损伤耳膜')}}2.audioaudio元素类似于video，用于播放音频它的属性方法events和video元素几乎一样。2.Canvas1.掌握canvas元素的基本概念，学习如何在页面上放置一个canvas元素，以及如何使用canvas元素绘制一个简单的矩形2.掌握路径的使用方法，并会使用路径绘制圆和多边形3.掌握渐变图形的绘制方法，学习图形变形、图形缩放、图形组合，以及给图形绘制阴影的方法1.基本用法（一）获取画布对象--获取画布获取画布对象通过document.getElementById()等方法获取canvas对象。(2)获取上下文(context)--获取画笔图形上下文是一个封装了很多绘图函数的对象，参数只能是"2d"(3)定义填充样式context.fillStyle='red';(4)绘制填充图形context.fillStyle(10,10,100,100)//第一个参数是x轴的起始位置，第二个参数是y轴的起始位置，第三个参数是宽度绘制的图形，第四位为绘制图形的高度1.示例--绘制一个填充的矩形//通过fillRectwindow.onload=function(){//1.获取画布varcanvas=document.querySelector('canvas');//2.获取画布上下文对象varcontext=canvas.getContext('2d');//3.绘制填充样式context.fillStyle='red'//4.绘制填充矩形context.fillRect(10,10,100,100)}//绘制轮廓矩形边框矩形window.onload=function(){//1.获取画布varcanvas=document.querySelector('canvas');//2.获取画布上下文对象varcontext=canvas.getContext('2d');//设置轮廓样式context.strokeStyle='red'//设置轮廓的线宽context.lineWidth=4;//绘制边框矩形或轮廓矩形context.strokeRect(10,10,100,100);//清除一部分区域context.clearRect(0,0,50,50);//清除所有区域context.clearRect(0,0,400,400)}2.例子——画一个圆window.onload=function(){//获取画布varcanvas=document.querySelector('canvas');//获取画布上下文对象varcontext=canvas.getContext('2d');//画圆直线曲线需要路径起始路径context.beginPath();//圆的路径xyrstartradianendradian圆的方向是否为逆时针路径//Math.PI--180度context.arc(100,100,50,0,Math.PI,true);//context.arc(100,100,50,0,Math.PI/2);//直线路径context.lineTo(100,100);context.lineTo(150,100);context.arc(300,300,50,0,Math.PI*2);//结束路径//context.closePath();//填充样式context.fillStyle='red'//画一个实心圆context.fill();//绘制轮廓//context.stroke();}3.移动实例圆window.onload=function(){//获取画布varcanvas=document.querySelector('canvas');//获取画布下面的对象varcontext=canvas.getContext('2d');varbubble={x:100,y:100,r:50,color:'red'};画（泡泡）；move(bubble)setInterval(function(){//清除画布context.clearRect(0,0,600,600);move(bubble)},200)//绘图方法functiondraw(bubble){context.beginPath();context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);context.fillStyle=bubble.color;context.fill()}//移动函数move(bubble){bubble.x+=5;气泡.y+=5;画（泡泡）；}}1。线性渐变createLinearGradientwindow.onload=function(){//获取画布varcanvas=document.querySelector('canvas');//获取画笔varcontext=canvas.getContext('2d');//声明一个渐变对象。第一个参数是渐变x轴的起始位置。第二个参数是渐变y轴的起始位置。第三个参数是渐变在x轴上的结束位置。第四个参数是渐变结束点在y轴上的位置。varg=context.createLinearGradient(0,0,400,400)//添加渐变颜色g.addColorStop(0,'red')g.addColorStop(0.5,'cyan')g.addColorStop(1,'yellow');//将渐变色赋予填充样式context.fillStyle=g;context.fillRect(0,0,400,400);}2.RadialGradientcreateRadialGradientConcentricGradientwindow.onload=function(){//获取画布varcanvas=document.querySelector('canvas');//获取画笔varcontext=canvas.getContext('2d');//声明一个渐变对象。前三个参数为小圆心x轴起始位置y轴起始位置半径后三个参数为大圆中心x轴起始位置y轴起始位置半径varg=context.createRadialGradient(200,200,50,200,200,200)//添加渐变色g.addColorStop(0,'red')g.addColorStop(0.5,'cyan')g.addColorStop(1,'yellow');//给填充样式赋予渐变色context.fillStyle=g;context.fillRect(0,0,400,400)}
