XML与Web_3 HTML5新特性及应用_xml和html5的应用-CSDN博客

本文链接：https://blog.csdn.net/weixin_45488518/article/details/118052156

HTML5新特性及应用

多媒体
WebGL
SVG
Canvas 画布元素

多媒体

插入音频或视频

<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>

在这里插入图片描述