Erlo

H5新增的标签以及改良的标签

时间:2018-10-11 09:58   阅读:8次   来源:博客园页面报错

1OL标签的改良 start type  reversed:翻转排序

2datalist标签自动补全的使用

3progress标签的使用:进度条

4meter标签的应用

5details展开收缩标签的使用-子标签summary(自动带有展开收缩的效果)  

6mark标签的应用:高亮显示文本

7》音频标签 audio

8》视频标签 video

补充样式:

outline:轮廓

border,但是border占位置

          outline不占位置

outline-offset:10px/-10px;//设置偏移量 可实现(内外边框)

 

 

..canvas绘图:

 

1canvas:画布

 

<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();//进行绘制

 

#zs#画折线:多几个lineTo()#fzs#

 

</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 - 类似于cssfont属性

 

context.font = "15px 宋体 bold";

 

//对齐方式 left center right

 

context.textAlign = "left|center|right";

 

//垂直对齐方式 textBaseline

 

//top

 

//middle

 

//bottom

 

//alphabetic ---字母基线对齐

 

#zs# 验证码图片 干扰:线 点  文字(字母+数字) 颜色随机性#fzs#

 

 

 

</script>

 

下一篇:CSS3实现的几个小loading效果

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2018-10-22 06:15:22Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 源码分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部