h5比html新增加的标签,H5新增的标签以及改良的标签_鲜榨口语App的博客-程序员宅基地

技术标签: h5比html新增加的标签  

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:画布

2)得到画布

var obj = document.getelementbyid('canvas');

3)设置画布大小(默认宽:300高:150)

obj.width = "600px";

obj.height = "600px";

4)确定绘制对象的方式:2d

var context = obj.getcontext('2d');

5)重新绘制

context.beginpath();

6)闭合绘制路径

context.closepath();

----------直线/矩形/圆/文字------------

7)直线(起点/终点)

context.moveto(x,y);//起点x坐标,y坐标

context.lineto(x, y)//终点x坐标,y坐标

context.linewidth = 5;//边框的粗细

context.strokestyle = "red";//描边的颜色

context.stroke();//进行绘制

/*画折线:多几个lineto()*/

8)矩形(起始坐标,宽 高)

context.rect(x, y, w, h);//x坐标y坐标 宽 高

context.stroke();//空心矩形 只有黑色描边

context.fill();//实心矩形 黑色填充

//直接绘制空心矩形

context.strokerect(x, y, w, h);//绘制空心矩形

//直接绘制实心矩形

context.fillrect(x, y, w, h);//绘制实心矩形

9)圆形(起始坐标,半径,圆周(0-math.pi*2))

context.arc(x, y, radius, startangle, endangle, anticlockwise);

//x坐标,y坐标,半径,起点,终点,方向(顺:false逆:true)默认false

context.stroke();

context.fill();

10)绘制文字

//绘制文字

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 ---字母基线对齐

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42426472/article/details/117805917

智能推荐

微信小程序 获取用户网络状态和设备的信息_东边的小山的博客-程序员宅基地

var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, netWorkType: '', phoneType: '', phoneSystemType: '', }, //事件处理函数 bindViewTap: function() { wx.nav...

CentOS7使用firewall-cmd打开关闭防火墙与端口_purple.taro的博客-程序员宅基地_firewall-cmd 关闭防火墙

先查看防火墙是否开启了1521端口:firewall-cmd --permanent --query-port=1521/tcp打印结果如下:no表示没有开放1521端口,那么添加下该端口:firewall-cmd --permanent --add-port=1521/tcp打印结果如下:success重新加载防火墙策略:firewall-cmd --reload执行成功后,查看1521端口是否被开启:firewall-cmd --permanent --query-port=152

MySQL、Oracle 通过SQL查看表注释、字段信息_白衣若尘的博客-程序员宅基地

MySQL: 查看表注释: 用 SHOW TABLE STATUS [FROM db_name] 示例: SHOW TABLE STATUS ; --数据库下所有表注释 SHOW TABLE STATUS FROM d

题目-[安洵杯 2019]easy_web_Jerem1ah的博客-程序员宅基地

3X05题目-[安洵杯 2019]easy_webimg参数两次base64解码一次hex解码得到555.png相反index.php经过反步骤得到TmprMlpUWTBOalUzT0RKbE56QTJPRGN3替换之后得到base64编码解码后得到php代码<?phperror_reporting(E_ALL || ~ E_NOTICE);header('content-type:text/html;charset=utf-8');$cmd = $_GET['cmd'];if (!i

RPM与YUM_ge_bq的博客-程序员宅基地

文章目录一.RPM1.查询RPM包信息2.安装、卸载、升级RPM软件包3.解决软件包依赖关系方法4.维护RPM数据库二.YUM1.yum命令2.配置本地yum仓库一.RPM       RPM软件包管理器Red-Hat package Manager1.由Red Hat公司提出, 被众多Linux发行版所采用2.建立统一的文件数据库3.详细记录软件包安装、卸载、升级等变化信息4.自动分析软件包依赖关系5.保持各应用程序在一个

一个基于MFC的QQ机器人框架_weixin_30556161的博客-程序员宅基地

GitHub项目地址:https://github.com/HarmoniaLeo/MFC-QQbot0x00 这是什么?欢迎使用本QQ机器人开发框架(如果有人会用的话)。本框架是主要使用MFC中的Windows API制作而成、利用Windows的消息机制以及一些系统级底层架构实现利用TIM客户端自动收发QQ消息的QQ机器人框架,用其制作的QQ机器人程序已在VS201...

随便推点

获取颜色编码_Java_Hello_World.的博客-程序员宅基地

1,使用截屏功能2,正在截屏的时候按下shit,然后看到一个#c92027(red/红色)3,按下字母C4,到需要颜色代码的地方Ctrl+V

python 函数进阶_weixin_30951231的博客-程序员宅基地

三元运算a = 1b = 5c = a if a>b else bprint(c)构成变量 = 条件返回True的结果 if 条件 else 条件返回False的结果必须要有返回的结果必须要有if和else只能是简单的情况def func(a,b): return a if a>b else bc = func(3,5)...

rqt_graph提示b‘Format: “dot“ not recognized. Use one of:\n‘_qq_46145354的博客-程序员宅基地

在终端运行roscore,分别运行rosrun turtlesim turtle和rosrun turtlesim turtle_teleop_key,再输入rqt_graph,提示如下错误"dot" with args ['-Tdot', '/tmp/tmp145cvdav'] returned code: 1stdout, stderr:b''b'Format: "dot" not recognized. Use one of:\n'PluginHandlerDirect._resto.

form标签_ailihx的博客-程序员宅基地

这个标签会生成HTML form标签,同时为form内部所包含的标签提供一个绑定路径(binding path)。 它把命令对象(command object)存在PageContext中,这样form内部的标签 就可以使用这个对象了。标签库中的其他标签都声明在form标签的内部。 让我们假设有一个叫User的领域对象,它是一个JavaBean,有着诸如 firstName和lastName这

selenium点按钮 报错_selenium点击按钮不触发_weixin_39905624的博客-程序员宅基地

想要抓取今年运动会的成绩,然后网页内有选择日期的按钮,但是我用selenium点击,没反应,报错了,不知道是哪里有错误,请各位大神指教,代码如下:from selenium import webdriverbrowser = webdriver.Chrome()url = 'http://results.tianjin2017.gov.cn:81/#eyJNb2R1bGVzIjp7IkluZGV4...

编译Linux内核2.6.36_weixin_34321977的博客-程序员宅基地

编译Linux内核2.6.36一直以来,都是从事Linux用户空间的程序开发,对于Linux的了解仅限于基本Linux内核的经典书籍的阅读。由于目前从事的工作主要是TCP/IP 4层以上的处理,所以对内核的接触也不多。但近日空闲时间较多了,于是决定要好好研究研究Linux内核,主要集中在Linux内核的TCP/IP协议栈。...