1.HTML5新个性
(1)标签：nav article footer header aside...
(2)表单新个性：input type取值：date time week email number
(3)表单属性：form formaction(提交地址) formmethod(提交形式) required readonly disabled
(4)表单控件标签：progress meter datalist
1.1媒体元素
1.1.1 video
（1）在video标签呈现之前，如果想在网页中播放视频或者音频数据是十分艰难的。
（2）H5中的video标签能够向应用img显示图片一样简略去播放视频
（3）video提供了很多属性和办法，咱们能够通过间接设定或者通过js管制视频的显示
（4）读写属性 src, autoplay(自动播放), poster=“封面 放封面的地址” ,loop(循环播放),controls(管制条)，width height 宽高个别不一起设置应用
（5）办法：play()播放，pause()暂停，paused()切换 是否是暂停状态，volume()管制音量，currentTime()以后播放秒数 playbackRate()倍数播放
1.1.2 audio音频
audio元素与video相似，用来播放音频的。其属性办法事件也简直与video元素统一。
当不加control时相当于背景音乐
<audio src="./音视频/1.mp3" controls loop autoplay></audio>
1.2 canvas
(1)把握canvas元素的基本概念，学会如何在页面上搁置一个canvas元素，如何应用canvas元素绘制出一个简略的矩形
(2)把握应用门路的办法，可能利用门路绘制出圆与多边形
(3)把握突变图形的绘制办法，学会图形变形，图形缩放，图形组合，以及给图形绘制暗影的办法
根本用法
(1)获取canvas对象--获取画布
通过document.getElementById()等办法获得canvas对象
(2)获取上下文--获取画布
图形上下文是一个封装了很多绘图性能的对象，参数只能是"2d"
var context = canvas.getContext("2d");
(3)定义填充款式
context.fillStyle="red";
(4)绘制填充图形
context.fillStyle(10,10,100,100);
//第一个参数是x轴开始的地位，第二个参数是y轴开始的地位，第三个参数是绘制图形的宽，第四个参数是绘制图形的高
1.2.1 绘制填充矩形(fillRect)
<body>
<canvas width="400px" height="400px"></canvas>
</body>
<script>
window.onload = function(){
//1.获取canvas对象---获取画布
var canvas = document.querySelector("canvas");
//2.获取上下文对象---获取画布
var context = canvas.getContext("2d");
//3.绘制填充款式
context.fillStyle = "red";
//4.绘制填充矩形
context.fillRect(10,10,100,100);
}
</script>
1.2.2 绘制轮廓矩形/边框矩形
<body>
<canvas width="400px" height="400px"></canvas>
</body>
<script>
window.onload = function(){
//1.获取canvas对象
var canvas = document.querySelector("canvas");
//2.获取上下文
var context = canvas.getContext("2d");
//3.设置轮廓款式
context.strokeStyle="red";
//4.设置轮廓的线宽
context.lineWidth = 10;
//5.绘制边框矩形或者轮廓矩形
context.strokeRect(0,0,100,100);
//6.革除一部分区域
context.clearRect(0,0,50,50);
//7.分明全副区域
context.clearRect(0,0,400,400);
}
</script>
1.2.3 绘制圆
<body>
<canvas width="400px" height="400px"></canvas>
</body>
<script>
window.onload = function(){
//1.获取canvas对象
var canvas = document.querySelector("canvas");
//2.获取上下文
var context = canvas.getContext("2d");
//3.绘制圆、曲线、直线须要门路
context.beginPath();
//4.圆的门路 x y r 开始弧度 完结弧度 圆的方向是否是逆时针门路
//Math.PI --180度
context.arc(100,100,50,0,Math.PI,true);
//context.arc(100,100,50,0,Math.PI/2);
//5.直线门路
context.lineTo(100,100);//指回圆点
//6.完结门路
context.closePath();
//7.填充款式
context.fillStyle="red";
//8.绘制填充圆
context.fill();
//绘制轮廓圆
// context.stroke();
}
</script>
1.2.4 圆挪动
<body>
<canvas width="400px" height="400px"></canvas>
</body>
<script>
window.onload = function(){
//1.获取canvas对象
var canvas = document.querySelector("canvas");
//2.获取上下文对象
var context = canvas.getContext("2d");
var bubble = {
x:100,
y:100,
r:50,
color:'red'
};
draw(bubble);
move(bubble);
setInterval(function(){
//革除画布
context.clearRect(0,0,600,600);
move(bubble);
},200)
//绘制办法
function draw(bubble){
context.beginPath();
context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
context.fillStyle = bubble.color;
context.fill();
}
//挪动
function move(bubble){
bubble.x += 5;
bubble.y += 5;
draw(bubble);
}
}
</script>
发表回复