HTML5新特性及应用
多媒体
插入音频或视频
<audio src="sound.mp3" controls></audio>
<video src="movie.webm" autoplay controls></video>
WebGL
编写网页代码即可实现3D图像的展示
SVG
- SVG(Scalable Vector Graphics):可缩放矢量图形,使用 XML 来描述二维图形和绘图程序的语言。
- 可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果,和动画。
Canvas 画布元素
- 可以在网页中绘制出所需的图形
- <canvas>标签只是图形的容器,真正绘制图形需要使用脚本(javascript)来完成
- 创建画布和对象
<canvas id="myCanvas" width="300" height="200"></canvas>
var canvas = document.getElementById('myCanvas');
//创建 context 对象
var ctx = canvas.getContext('2d');
- Canvas基本用法解析
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>logo</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800">your browser does not support the canvas tag</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
//创建 context 对象
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(300, 50);//把路径移动到画布中的指定点
ctx.lineTo(300, 350);//添加一个新点
ctx.lineTo(350, 350);
ctx.lineTo(350, 50);
ctx.lineTo(300, 50);
ctx.lineWidth = 3;
ctx.strokeStyle = "blue";//指定线条的颜色
ctx.setLineDash([3]);//指定线条的虚线间隔
ctx.stroke();//绘制线条,默认是黑色,如果需要指定样式,需要绘制前指定。
//lineWidth:指定线条的宽度
ctx.fillStyle = "yellow";//指定填充的颜色
ctx.fill();//颜色填充
ctx.beginPath();//通过清空子路径列表开始一个新路径
//closePath():将笔点返回到当前子路径起始点的方法
ctx.moveTo(50, 150);
ctx.lineTo(400, 150);
ctx.lineTo(400, 200);
ctx.lineTo(50, 200);
ctx.lineTo(50, 150);
ctx.strokeStyle = "blue";
ctx.setLineDash([3]);
ctx.stroke();
ctx.fillStyle = "yellow";
ctx.fill();
ctx.strokeStyle = "blue";
ctx.strokeRect(130, 70, 20, 270);//绘制空心矩形
//clearRect(x,y,width,height):清空矩形
//x:起始点X坐标;
//y :起始点Y坐标;
//width :矩形宽;
//height :矩形高
ctx.beginPath();//通过清空子路径列表开始一个新路径,这个很重要,不然就连笔了
var g1 = ctx.createLinearGradient(0, 0, 0, 500);
//createLinearGradient(xStart,yStart,xEnd,yEnd)
//xStart:渐变开始点x坐标
//yStart:渐变开始点y坐标
//xEnd:渐变结束点x坐标
//yEnd:渐变结束点y坐标
g1.addColorStop(0, '#F0F0F0');
g1.addColorStop(1, '#0000FF');
//addColorStop(offset,color)
//offset:设定的颜色离渐变结束点的偏移量(0~1)
//color:绘制时要使用的颜色
ctx.fillStyle = g1;
//ctx.fillStyle = "blue";
ctx.fillRect(30,30,400,350);//fillRect(x,y,width,height):绘制实心矩形
ctx.fillStyle = "white";
ctx.fillRect(300, 50, 50, 300);
ctx.fillRect(50, 150, 350, 50);
ctx.fillRect(130, 70, 20, 270);
//ctx.arc(50, 50, 10, 0, 2 * Math.PI, true);
//arc(x,y,radius,startAngle,endAngle, anticlockwise)圆心的x坐标,圆心的y坐标,开始角度,结束角度,是否逆时针
if(ctx.ellipse) {
ctx.ellipse(140, 110, 50, 20, 0, 0, 2 * Math.PI);
ctx.ellipse(140, 250, 50, 20, 0, 0, 2 * Math.PI);
ctx.ellipse(140, 300, 50, 20, 0, 0, 2 * Math.PI);
//ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
//圆心的x坐标,圆心的y坐标,x坐标,y坐标,旋转角度,开始角度,结束角度,是否逆时针
}
ctx.fill();
</script>
</body>
</html>