每日一点前端-8-H5新特性

最新推荐文章于 2025-04-08 11:30:42 发布

「已注销」

最新推荐文章于 2025-04-08 11:30:42 发布

阅读量96

点赞数

本文链接：https://blog.youkuaiyun.com/zhonghua_csdn/article/details/89878047

版权

1.在canvas上绘制商标：

有趣的canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第六章在浏览器中画图</title>
</head>
<body>
<h1>6.1在画布上绘制商标</h1>
<canvas id="my-canvas" width="150" height="150">
</canvas>
<script>
    var canvas1 = document.getElementById('my-canvas');
    if (canvas1.getContext){
        var context = canvas1.getContext('2d');
        context.fillStyle = 'rgb(200,0,0)';
        context.fillRect(10,10,100,100);
        context.fillStyle = 'rgb(0,200,0)';
        context.fillRect(20,20,100,100);
        context.fillStyle = 'rgb(0,0,200)';
        context.fillRect(30,30,100,100);
    }
</script>
<h1>logo 测试</h1>
<canvas id="logo" width="500" height="60"><h1>IOTZZH</h1></canvas>
<script>
    var drawLogo = function () {
        var canvas2 = document.getElementById('logo');
        var context = canvas2.getContext('2d');
        context.fillStyle = '#FF0000';
        context.strokeStyle = '#FF0000';

        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(0,40);
        context.lineTo(30,0);
        context.lineTo(60,40);
        context.lineTo(285,40);

        context.font = 'italic 40px "Arial"';
        context.fillText('I O T Z Z H',60,36);

        context.stroke();
        context.closePath();

//        大三角形下的小方块
        context.save();
        context.translate(20,20);
        context.fillRect(0,0,20,20);

        context.fillStyle= '#FFFFFF';
        context.strokeStyle = '#FFFFFF';

        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(0,20);
        context.lineTo(10,0);
        context.lineTo(20,20);
        context.lineTo(0,20);

        context.fill();
        context.closePath();
        context.restore();

        //        为对象设置渐变效果&可是在这并没有起作用
        var gradient = context.createLinearGradient(0,0,0,40);
        gradient.addColorStop(0,'#AA00000');//暗红色
        gradient.addColorStop(1,'#FF00000');//红色
        context.fillStyle = gradient;
        context.strokeStyle = gradient;
    };
    var canvas2 = document.getElementById('logo');
    if (canvas2.getContext){
        drawLogo();
    }

</script>
</body>
</html>

2.多媒体的使用---音频，视频（其实初始界面也还不错，而且代码也特别少）

音频视频测试

代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>嵌入音频和视频</title>
</head>
<body>
<h1>音频测试</h1>
<audio id="mp3-test" controls>
   <source src="../music/test.mp3" type="audio/mpeg">
   <a href="../music/test.mp3">MP3下载</a>
</audio>
<h1>视频</h1>
<video id="video-test" controls style="width: 300px;">
   <source src="../video/test.mp4" type="video/mp4">
</video>

</body>
</html>

3.伪类设置表格样式

表格

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用伪类设置表格样式</title>
    <style type="text/css">
        table{border-collapse: collapse;width: 600px;}
        th,td{border: none;}
        th{background-color:#000;color:#fff;}
        tr:nth-of-type(even){color:red;}
tr:nth-of-type(odd){
    color:black;
}
 table tr:nth-child(3){
     background-color:yellow;
 }
 table tr:nth-last-child(6){
     color: #00CCFF;
     background-color:red;
 }

    </style>
</head>
<body>
<table>
    <tr>
        <th>Item</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>Coffe</td>
        <td>$10.00</td>
        <td>5</td>
        <td>$50.00</td>
    </tr>
    <tr>
        <td>Coffe</td>
        <td>$10.00</td>
        <td>5</td>
        <td>$50.00</td>
    </tr>
    <tr>
        <td>Coffe</td>
        <td>$10.00</td>
        <td>5</td>
        <td>$50.00</td>
    </tr>
    <tr>
        <td colspan="3">Subtotal</td>
        <td>$198.00</td>
    </tr>
    <tr>
        <td colspan="3">Shipping</td>
        <td>$198.00</td>
    </tr>
    <tr>
        <td colspan="3">Total Due</td>
        <td>$198.00</td>
    </tr>
</table>
</body>
</html>

4.进度条以及在图片上定位，最简单的使用方式，无js操作。

H5新特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meter</title>
    <style type="text/css">
        meter{width:280px;}
        .map{width: 500px;height:500px; background-color: #00FF00; overflow: hidden;}
        .area{ background-color: #00AA88; }
    </style>
</head>
<body>
<h3>中华进度条</h3>
<meter value="2500.00" title="中华进度条" id="pledge_goal" min="0" max="5000.00"></meter>
<p>help us reach our goal of $5000</p>
<progress id="progressbar" min="0" max="5000" value="200"></progress>
<p>help us reach our goal of $5000</p>

<div class="map">
    ![](../../images/001.png)

    <map name="planetmap" id="planetmap">
        <div class="area"><area  shape="circle" coords="300,200,50" href ="#" alt="Venus" /></div>
        <area shape="circle" coords="129,161,100" href ="#" alt="Mercury" />
        <area shape="rect" coords="0,0,110,260" href ="#" alt="Sun" />
    </map>
</div>
</body>
</html>

公众号.png