H5新增的标签以及改良的标签
Posted everythingcw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5新增的标签以及改良的标签相关的知识，希望对你有一定的参考价值。
1》OL标签的改良 start type reversed:翻转排序
2》datalist标签自动补全的使用
3》progress标签的使用:进度条
4》meter标签的应用
5》details展开收缩标签的使用-子标签summary(自动带有展开收缩的效果)
6》mark标签的应用：高亮显示文本
7》音频标签 audio
8》视频标签 video
补充样式：
outline：轮廓
同border,但是border占位置
outline不占位置
outline-offset:10px/-10px;//设置偏移量 可实现(内外边框)
..canvas绘图:
1）canvas:画布
<canvas id="canvas"></canvas>
2)得到画布
<script type="text/javascript">
var obj = document.getElementById(‘canvas‘);
</script>
3)设置画布大小（默认宽：300 高：150）
obj.width = "600px";
obj.height = "600px";
4)确定绘制对象的方式：2d
var context = obj.getContext(‘2d‘);
5)重新绘制
context.beginPath();
6)闭合绘制路径
context.closePath();
----------直线/矩形/圆/文字------------
7)直线(起点/终点)
<script type="text/javascript">
context.moveTo(x,y);//起点 X坐标,Y坐标
context.lineTo(x, y)//终点 X坐标,Y坐标
context.lineWidth = 5;//边框的粗细
context.strokeStyle = "red";//描边的颜色
context.stroke();//进行绘制
/*画折线：多几个lineTo()*/
</script>
8)矩形(起始坐标,宽 高)
<script type="text/javascript">
context.rect(x, y, w, h);//X坐标 Y坐标 宽 高
context.stroke();//空心矩形 只有黑色描边
context.fill();//实心矩形 黑色填充
//直接绘制空心矩形
context.strokeRect(x, y, w, h);//绘制空心矩形
//直接绘制实心矩形
context.fillRect(x, y, w, h);//绘制实心矩形
</script>
9)圆形(起始坐标,半径,圆周(0-Math.PI*2))
<script type="text/javascript">
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
//X坐标,Y坐标,半径,起点,终点,方向(顺：false 逆：true)默认false
context.stroke();
context.fill();
</script>
10)绘制文字
<script type="text/javascript">
//绘制文字
context.text(‘some text‘);
//绘制描边文字
context.strokeText(text, x, y[, maxWidth])
//绘制填充文字
context.fillText(text, x, y[, maxWidth])
//属性
//font - 类似于css的font属性
context.font = "15px 宋体 bold";
//对齐方式 left center right
context.textAlign = "left|center|right";
//垂直对齐方式 textBaseline
//top
//middle
//bottom
//alphabetic ---字母基线对齐
/* 验证码图片 干扰:线 点 文字（字母+数字) 颜色随机性*/
</script>
以上是关于H5新增的标签以及改良的标签的主要内容，如果未能解决你的问题，请参考以下文章