1.HTML5音频视频

音频播放
1.Audio(音频)
HTML5提供了播放音频文件的标准
2.control(控制器)
control属性供添加播放,暂停和音量控件
3.标签:
<audio> 定义声音

<source> 规定多媒体资源,可以是多

<button οnclick="clickA()">播放/暂停</button><!--   <audio id="audio" src="周杰伦%20-%20彩虹.mp3"  controls="controls" autoplay="autoplay">浏览器不支持的时候显示</audio>--><audio id="audio" src="http://qzone.haoduoge.com/music3/2015-02-03/1422957966.mp3"  >浏览器不支持的时候显示</audio><script>var a =document.getElementById("audio");function clickA(){if(a.paused){a.play()}else{a.pause();}}</script>

视频播放
1.Video(视频)
HTML5提供了展示视频的标准
2.control(控制器)
control属性提供添加播放,暂停和音量控件
3.标签
<video> 定义声音
<source> 规定多媒体资源,可以是多个
4.属性:
width:宽
height:高

 <button οnclick="clickV()" >播放/暂停</button><button οnclick="big()" >放大</button><!-- controls="controls"决定有没默认控制框  不写就没-->
<video id="video" controls="controls" >浏览器不支持<!--火狐不支持.MP4--><source src="1.mp4"><source src="1.ogg">
</video><script>var v = document.getElementById("video");//写在head不行?要写在对象后面..function clickV(){if(v.paused){v.play()}else{v.pause();}}function big(){v.width=800;v.height = 800;}</script>

2.HTML5拖放

HTML5拖放
1.HTML拖放:
拖放(Drag和drop)是HTML5标准的组成部分
2.拖动开始
ondragstart:调用了一个函数,drag(event),它规定了被拖放的数据
3.设置拖放数据
setData():设置被拖数据的数据类型和值
4.放入位置:
ondragover:事件规定在何处放置被拖动的数据
5.放置
ondrop:当放置被拖数据时,会发生drop事件

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img src="1.png" id="img1">
<img src="5.png" id="img2">
<div id="msg"></div>

<style>.box{width: 400px;height: 400px;}#box1 {float: left;background-color: gray;}#box2{float: left;background-color: yellow;}</style>

var box1Div, box2Div;
var msgDiv;
var img1,img2;
window.onload = function () {box1Div = document.getElementById("box1");msgDiv = document.getElementById("msg");img1 = document.getElementById("img1");img2 = document.getElementById("img2");box2Div = document.getElementById("box2");/*  box1Div.ondragenter = function (e) {showObj(e);}*/box1Div.ondragover = function (e) {e.preventDefault();//阻止系统默认的事件}box2Div.ondragover = function (e) {e.preventDefault();//阻止系统默认的事件}img1.ondragstart = function (e) {e.dataTransfer.setData("imgId", "img1");}img2.ondragstart = function (e) {e.dataTransfer.setData("imgId", "img2");}box1Div.ondrop = dropImagHandler;box2Div.ondrop = dropImagHandler;
}function dropImagHandler(e) {//测试IE不支持//     showObj(e.dataTransfer);e.preventDefault();//阻止系统默认的事件
//           var img = document.getElementById("img1");var img = document.getElementById(e.dataTransfer.getData("imgId"));//     box1Div.appendChild(img);e.target.appendChild(img);// e.target获取当前指定的目标源
}function showObj(obj) {var s = "";for (var k in obj) {s += k + ":" + obj[k] + "<br>";}msgDiv.innerHTML = s;
}

拖放本地资源:

 <script src="js.js"></script><style>#imgContainer{width: 500px;height: 500px;background-color: gray;}</style>
</head>
<body><div id="imgContainer"></div>
</body>

var imgContainer;
window.onload = function () {imgContainer = document.getElementById("imgContainer");imgContainer.ondragover = function (e) {e.preventDefault();}imgContainer.ondrop = function (e) {e.preventDefault();var f = e.dataTransfer.files[0];var fileReader = new FileReader();fileReader.onload = function (e) {
//           imgContainer.innerHTML="<img src=\""+fileReader.result  + "\">"imgContainer.innerHTML+="<img src=\""+fileReader.result  + "\">"    // 添加多张图片}fileReader.readAsDataURL(f);}
}

3.HTML5Canvas标签

创建Canvas标签
1.Canvas标签:
HTML<canvas>元素用于图形的回执,通过脚本(通常是JavaScript)来完成
<canvas>标签只是图形容器,您必须使用脚本来绘制图形
你可以通过多种方法使用Canva回执路径,盒,圆,字符以及添加图像
2.标签:
<canvas>
创建方法1:

canvas class="canvas" width="200px" height="200px"></canvas>

方法2:

window.οnlοad= function () {createCanvas()
}function createCanvas(){document.body.innerHTML += "<canvas id=\"mycanvas\" width='200px' height=\"200px\"></canvas> "//有没\转义字符都行
}

绘制图形
1.绘制图形
canvas元素本身是没有绘图能力的.所有的回执工作必须在JavaScript内部完成
2.api
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

var mycanvas,context;window.οnlοad= function () {createCanvas()
//    drawRect();drawImg();
}function createCanvas(){document.body.innerHTML = "<canvas id=\"mycanvas\" width='500px' height=\"500px\"></canvas> "mycanvas = document.getElementById("mycanvas");context = mycanvas.getContext("2d");
}function drawRect(){//绘制图形context.fillStyle="red";  //改颜色
//    context.rotate(45);//逆时针旋转context.translate(200,200);//移动context.scale(2,0.5)//缩放,x 2倍,y 0.5倍//void fillRect(in float x, in float y, in float width, in float height);//x,y起始坐标点,后两项为大小context.fillRect(0,0,200,200);
}function drawImg(){//绘制图片//void drawImageFromRect(in HTMLImageElement image,// in float sx 可选, in float sy 可选, in float sw 可选, in float sh 可选, in float dx 可选, in float dy 可选, in float dw 可选, in float dh 可选, in     // DOMString compositeOperation 可选);var img = new Image();img.onload = function () {context.drawImage(img,0,0)//位置为(0,0);}img.src="3.png";
}

4.HTML5Canvas应用

1.认识createjs

需要引入easeljs-0.7.1.min.js

<canvas id="canvas" width="500px" height="500px"></canvas>

var canvas;
var stage;
var txt;
var count = 0;
window.οnlοad= function () {canvas = document.getElementById("canvas");stage = new createjs.Stage(canvas);//Text ( [text]  [font]  [color] )txt = new createjs.Text("这里写文字内容->","20px Arial","red");stage.addChild(txt);createjs.Ticker.setFPS(10);
//    createjs.Ticker.addEventListener("tick",stage);//这里写文字内容->0createjs.Ticker.addEventListener("tick",tick);
}function tick(){count++;txt.text="这里写文字内容->"+count+"!";stage.update();
}

2.某炫酷的效果

<canvas id="canvas" width="1000px" height="500px"></canvas>

var canvas;
var stage;
var img = new Image();
var sprite;window.onload = function () {canvas = document.getElementById("canvas");stage = new createjs.Stage(canvas);  //舞台//添加监听事件stage.addEventListener("stagemousedown",clickCanvas);stage.addEventListener("stagemousemove",moveCanvas);var data = {images:["2.png"],frames:{width:20,height:20,regX:10,regY:10}//序列  宽,高,变化区域};//var spriteSheet = new createjs.SpriteSheet(data); --API//var instance = new createjs.Sprite(spriteSheet)sprite = new createjs.Sprite(new createjs.SpriteSheet(data));createjs.Ticker.setFPS(20);createjs.Ticker.addEventListener("tick",tick);//监听
};function tick(){//stage.getNumChildren(); Returns the number of children in the display list.var t = stage.getNumChildren();//Returns the number of children in the display list.for(var i = t-1;i>=0;i--){//stage.getChildAt(i); Returns the child at the specified index.var s= stage.getChildAt(i);s.vY += 2;s.bX += 1;s.x += s.vX;s.y += s.vY;s.scaleX = s.scaleY = s.scaleX + s.vS;s.alpha += s.vA;if(s.alpha<=0|| s.y>canvas.height){stage.removeChildAt(i);}}stage.update();
}function clickCanvas(){//stage.mouseX,stage.mouseY,鼠标位置addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2);
}function moveCanvas(){addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1);
}function addS(count,x,y,speed){for(var i=0;i<count;i++){var s = sprite.clone();s.x = x;s.y = y;s.alpha = Math.random()*0.5 + 0.5;     //透明度变化s.scaleX = s.scaleY = Math.random() +0.3;    //缩放var a = Math.PI * 2 * Math.random(); //范围var v = (Math.random() - 0.5) * 30 *speed; // 速度s.vX = Math.cos(a) * v;s.vY = Math.sin(a) * v;s.vS = (Math.random()-0.5)*0.2;  //scales.vA = -Math.random() * 0.05 -0.01;  //alphastage.addChild(s);}
}

5.SVG

SVG介绍
1.什么是SVG?

1):SVG指可伸缩矢量图形(Scalable Vector Graphics)
2):SVG用来定义用于网络的基于矢量的图形
3):SVG使用XML格式定义图形
4):SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
5):SVG是万维网联盟的标准

2.SVG优势:

1):SVG图像可通过文本编辑器来创建和修改
2):SVG图像可被搜索,索引,脚本化或压缩
3):SVG是可伸缩的
4):SVG图像可在任何的分辨率下被高质量地打印
5):SVG可在图像质量不下降的情况下被放大

3.api(元素):

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element

2.绘制矢量图形

<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"><circle r="50" cx="60" cy="60"></circle><!--圆心(cx,cy)-->
</svg>

<!--IE11不支持-->
<svg width="120" height="120"viewPort="0 0 120 120" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="100" height="100"><animate attributeType="XML"attributeName="x"from="-100" to="120"dur="10s"repeatCount="indefinite"/></rect></svg>

3.引入外部svg文件

    <iframe src="svg.svg" width="400" height="200" frameborder="no"></iframe>

svg.svg 例:

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink" ><polygon points="60,30 90,90 30,90"><animateTransform attributeName="transform"attributeType="XML"type="rotate"from="0 60 70"to="360 60 70"dur="10s"repeatCount="indefinite"/></polygon>
</svg>

HTML5新特性基础学习笔记上相关推荐

HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
HTML5新特性基础学习笔记下
6.Web储存客户端储存数据 1.两种方式 1):localStorage - 没有时间限制的数据存储 2):sessionStorage - 针对一个session的存储数据 2. ...
HTML5之HTML基础学习笔记
列表标签列表的应用场景场景:在网页中按照行展示关联性的内容,如:新闻列表.排行榜.账单等特点:按照行的方式,整齐显示内容种类:无序列表.有序列表.自定义列表这是老师PPT上的内容, 列表,给 ...
PHP7新特性基础学习
文章目录前言一.PHP 标量类型与返回值类型声明和运算符二.PHP 常量数组三.PHP 匿名类四.PHP函数杂项五.PHP 7 异常六.PHP 7 use 语句七.PHP 7 Sess ...
1.html5+css3基础学习笔记(上)
1 HTML简介 1.1 W3C标准伯纳斯李1994年建立万维网联盟( W3C ),W3C的出现为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果.所以,我们需要制订我们编写的网页都 ...
计算机网络基础学习笔记(上)
学习视频在观看学习视频前,可以先了解一下大概:互联网是如何运作的随看随记 TCP和UDP MAC和IP地址,从几个不同的角度讲的: CSDN博客知乎博客园从我的角度来看,MAC地址是区分IP ...
HTML5之CSS基础学习笔记
基础认知 CSS初始 CSS的介绍 CSS:层叠样式表(Cascading style sheets) CSS作用是什么?? 给页面中的HTML标签设置样式 CSS就是用来做美化的,我之前写的网页就是 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
jQuery基础学习笔记(上)
1.简介及语法认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...

HTML5新特性基础学习笔记上