XML与Web_3 HTML5新特性及应用

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>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值