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

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

1.在canvas上绘制商标:

![有趣的canvas](http://upload-images.jianshu.io/upload_images/2789632-35cd5506b5950daf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

```

<!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.多媒体的使用---音频,视频(其实初始界面也还不错,而且代码也特别少)

![音频视频测试](http://upload-images.jianshu.io/upload_images/2789632-fe465e7476502a39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代码:

```

<!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.伪类设置表格样式

![表格](http://upload-images.jianshu.io/upload_images/2789632-0288439f36ddb940.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代码:

```

<!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新特性](http://upload-images.jianshu.io/upload_images/2789632-9ade687c849a9914.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

```

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

```

目录
相关文章
|
5天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
1月前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
|
1月前
|
存储 移动开发 前端开发
【Web 前端】H5新特性有哪些?
【4月更文挑战第22天】【Web 前端】H5新特性有哪些?
|
1月前
|
存储 前端开发 API
IndexedDB的异步操作特性对于前端开发者来说有什么挑战和注意事项吗?
IndexedDB是浏览器的客户端数据库,用于前端数据存储。其异步操作特性带来挑战,要求开发者熟悉异步编程,处理回调函数或Promise。注意事务管理,合理控制事务生命周期,防止阻塞。数据版本管理是关键,需处理升级和兼容性问题。错误处理必不可少,确保程序稳定性。性能优化涉及索引设计和查询优化,避免影响应用性能。理解并应对这些挑战,能有效利用IndexedDB构建高效Web应用。
|
1月前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JavaScript 前端开发 API
新一代前端框架Vue 4.0的特性及应用
【2月更文挑战第2天】随着前端技术的不断发展,Vue作为一款优秀的前端框架在市场上得到了广泛的应用和认可。本文将介绍新一代前端框架Vue 4.0的特性及其在实际项目中的应用,帮助开发者更好地了解并应用这一技术。
|
10月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-ES10增加的新特性1
前端学习笔记202306学习笔记第四十二天-ES10增加的新特性1
37 0
|
1月前
|
JavaScript 前端开发 API
Vue.js 3.0新特性解读:开启前端开发新纪元
Vue.js作为前端开发中备受欢迎的框架,近期推出了全新的3.0版本,本文将对Vue.js 3.0的新特性进行深入解读,带领读者探索前端开发的新纪元。
|
1月前
|
JavaScript 前端开发
前端:Vue.js特性
前端:Vue.js特性
|
10月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es7-ES7新增特性
前端学习笔记202306学习笔记第四十二天-Es7-ES7新增特性
39 0