html5 扩展属性,HTML5属性的介绍和扩展.doc

HTML5属性的介绍和扩展

HTML5

视频

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

如需在 HTML5 中显示视频,您所有需要的是:

音频

Canvas

一 简单图形整套的属性和方法专门用于绘制矩形:

1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色,你可以设置成你喜欢的任意颜色。只要页面打开着,每个绘图上下文都会记录自己的属性,除非你重置过它。

2、fillRect(x,y,width,height)绘制一个矩形,并以当前的fillStyle来填充。

3、srtokeStyle和fillStyle一样,可以设置为CSS颜色、一个图案或一种颜色渐变。

4、strokeRect(x,y,width,height)使用当前的storke style来绘制一个矩形,strokeRect并不填充中间区域,而只绘制矩形的边缘。

5、clearRect(x,y,width,height)清除指定矩形区域的像素。

按照惯例,不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说,beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部的范围,以便完成后续的描边和填充。

路径会跟踪当前坐标,默认值是原点。canvas本身也跟踪当前坐标,不过可能通过绘制代码来修改。

每一个canvas都有一个路径,定义路径就如同用铅笔作画。你可以任意作地画,但它不一定是最终作品的一部分,直到你拿起画笔沾上墨水描绘这条路径。

moveTo(x,y):不绘制,只是将当前位置移动到新目标坐标(x,y),并作为线条开始点。

lineTo(x,y):绘制线条到指定的目标坐标(x,y),并且在两个坐标之间画一条直线。不管调用它们哪一个,都不会真正画出图形,因为我们还没有主,调用stroke(绘制)和fil(填充)函数。当前,只是在定义路径的位置,以便后面绘制时使用。

closePath(),这个函数跟lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域。起连接起点,闭合路径的作用。

操作canvas文本的方式与操作其他路径对象的方式相同:可以描绘文本轮廓和填充文本内部,同时,所有能够应用于其他图形的变换和样式都能用于文本。context对象的文本绘制功能由两个函数组成:

fillText(text,x,y,maxwidth)

trokeText(text,x,y,maxwidth)

两个的参数完全相同,必选参数包括文本参数以及用于指定文本位置的坐标参数。maxwidth是可选参数,用于限制字体大小,它会将文本字体强制收缩到指定尺寸。此外,还有一个measureText函数可供使用,该函数会返回一个度量对象,其包含了在当前context环境下指定文本的实际显示宽度。

为了保证文本在各浏览器下都能正常显示,在绘制上下文里有以下字体属性

1、font可以是CSS字体规则中的任何值。包括:字体样式、字体变种、字体大小与粗细、行高和字体名称。

2、textAlign控制文本的对齐方式。它类似于(但不完全相同)CSS中的text-align。可能的取值为:start,end,left,right,和center.

3、textBaseline控制文本相对于起点的位置。可以取值有top,hanging,middle,alphabetic,ideographic和bottom。对于简单的英文字母,可以放心的使用top,middle或bottom作为文本基线。

一旦我们拥有了绘图上下文,就可以开始定义一个颜色渐变。渐变是两种或更多颜色的平滑过度。canvas的绘图上下文支持两种类型的渐变:

1、createLinearGradient(x0,y0,x1,x1)沿着直线从(x0,y0)至(x1,y1)绘制渐变。

2、createRadialGradient(x0,y0,r0,x1,y1,r1)沿着两个圆之间的锥面绘制渐变。前三个参数代表开始的圆,圆心为(x0,y0),半径为r0。最后三个参数代表结束的圆,圆心为(x1,y1),半径为r1。

canvas的绘图上下文中定义了几种绘制图片的方法:

1、drawIamge(image,dx,dy)接受一个图片,并将之画到canvaa中。给出的坐标(dx,dy)代表图片的左上角。比如,坐标(0,0)将把图片画到canvas的左上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/518975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OPPO数据中台之基石:基于Flink SQL构建实数据仓库

本文整理自 2019 年 4 月 13 日在深圳举行的 Flink Meetup 会议,分享嘉宾张俊,目前担任 OPPO 大数据平台研发负责人,也是 Apache Flink contributor。本文主要内容如下: OPPO 实时数仓的演进思路;基于 Flink SQL 的扩…

如何实现7*24小时灵活发布?阿里技术团队这么做

研发效能分为两块,一是用技术的更新来提升效率;二是提高整个技术生态中的协同效率,激发技术活力。阿里巴巴技术团队在此基础上要实现的终极目标是打造7*24小时灵活发布的通道,以及提供更快的业务代码迭代能力。今天,阿…

quarz cron表达式在线配置和运行看效果

https://www.bejson.com/othertools/cronvalidate/

不看就亏系列!这里有完整的 Hadoop 集群搭建教程,和最易懂的 Hadoop 概念!| 附代码...

作者 | chen_01_c责编 | Carol来源 | CSDN 博客封图 | CSDN付费下载于视觉中国hadoop介绍Hadoop 是 Lucene 创始人 Doug Cutting,根据 Google 的相关内容山寨出来的分布式文件系统和对海量数据进行分析计算的基础框架系统,其中包含 MapReduce 程序&#…

数据科学家是个性感的工作?我信你个鬼!

数据科学家40%是个吸尘器,40%是个清洁工,剩下20%是个算命的。作者 | Jingles译者 | 香槟超新星,责编 | 夕颜出品 | CSDN(ID:CSDNnews)根据《哈佛商业评论》的说法,数据科学家是21世纪最性感的工作。在现在这…

深入搜索引擎原理

之前几段工作经历都与搜索有关,现在也有业务在用搜索,对搜索引擎做一个原理性的分享,包括搜索的一系列核心数据结构和算法,尽量覆盖搜索引擎的核心原理,但不涉及数据挖掘、NLP等。文章有点长,多多指点~~ 一…

String转int,int转String

/*** string 转换int** param strInt* return*/public int intConverStr(String strInt) {try {return Integer.parseInt(strInt);} catch (NumberFormatException e) {logger.error("string conver int failure", e);}return 0;}/*** int 转换 string** param i* re…

印度版的“大众点评”如何将 Food Feed 业务从 Redis 迁移到 Cassandra

Zomato 是一家食品订购、外卖及餐馆发现平台,被称为印度版的“大众点评”。目前,该公司的业务覆盖全球24个国家(主要是印度,东南亚和中东市场)。本文将介绍该公司的 Food Feed 业务是如何从 Redis 迁移到 Cassandra 的…

如何使用计算机上合并计算方法,excel如何使用合并计算

Excel使用合并计算的方法是:1、首先打开“数据”选项卡,单击“合并计算”按钮。2、打开“合并计算”对话框,在“函数”下拉列表中选择“求和”选项,然后单击“引用位置”文本框右侧的范围按钮。3、此时进入“合并计算-引用位置”状…

利用Packer自定义镜像创建容器集群

阿里云容器服务Kubernetes集群支持CentOS操作系统,在绝大多数情况下可以满足客户的要求。但是有些客户由于业务系统对操作系统依赖比较高,希望定制化一些操作系统参数,则可以用自定义镜像来创建Kubernetes集群。 创建自定义操作系统镜像有两…

“远程”、“协作”风靡之际,你对TA知晓多少?

作者|晶少 转载|CSDN博客 2.4亿人在线使用文档协作无延宕…… 6万名武汉中小学生实力打造“远程课堂”活学高效…… 疫情以来,“远程”、“协作”持续大热,此局毋庸置疑。 根据QuestMobile最新发布的《2020中国移动互联网“战役”专题报告》显示&am…

java 判断对象是否为空

public static void main(String[] args) {Hxprocesslog hxlog null;if (StringUtils.isEmpty(hxlog)) {logger.info("null");} else {logger.info("not null");}} 控制台输出: 2021-01-17 16:26:43,032:INFO main (DataConvertShell.java:351) - null

蚂蚁金服OceanBase性价比是传统数据库的十倍

200名数据库领域从业三年以上的会员投票和专业的评委评选,在如此严苛的条件之下,蚂蚁金服金融级分布式关系数据库OceanBase 2.0依然获得了专家评审团的一致青睐,荣获2019中国数据库技术大会的“年度最佳创新产品”奖。 蚂蚁金服资深总监韩鸿源…

微型计算机原理及其应用彭楚武答案第三章,微机原理及其应用_第1章.ppt

微机原理及其应用_第1章微机原理及其应用_第1章本课程的考核方式: 开卷考试 评分标准: 期末考试成绩占70 %、 实验成绩占10 %、 课堂考核及作业占20% 。 全院各专业统一命题、流水作业阅卷、统一评分 如何学好“微机原理与接口技术”? 关键在…

战疫内外,京东智联云如此“一鸣惊人”!

作者|晶少 转载|CSDN博客 鼠年春节,一场疫情突如其来地打破了人们平静的生活;但在滨州,一款名为“疫情助手”的上线软件却为滨州市民的疫情生活带来“雪中送炭”的丝丝温情,细微知著中人们深深感受到了京东诠释而来的“ABCDE”技…

亿级消息系统的核心存储:Tablestore发布Timeline 2.0模型

背景 互联网快速发展的今天,社交类应用、消息类功能大行其道,占据了大量网络流量。大至钉钉、微信、微博、知乎,小至各类App的推送通知,消息类功能几乎成为所有应用的标配。根据场景特点,我们可以将消息类场景归纳成三…

2个 string 日期比较

public static void main(String[] args) {String date1 "2019-02-12";String date2 "2019-01-21";int compareTo date1.compareTo(date2);if (compareTo > 0) {System.out.println("date1 大于 date2");} else if (compareTo 0) {System…

SLS机器学习最佳实战:日志聚类+异常告警

0.文章系列链接 SLS机器学习介绍(01):时序统计建模SLS机器学习介绍(02):时序聚类建模SLS机器学习介绍(03):时序异常检测建模SLS机器学习介绍(04)…

计算机网络的ip分配,IP地址分配_网络设备技术应用_太平洋电脑网PConline

2.2 IP地址分配IPv4地址分配初期采用基于类别的方式,有3类主要方式:A、B和C以及2种特殊的网络地址D和E。*类型A地址:其中前7bit用于网络标识,后24bit用于主机标识,A类地址可容纳128个网络,任意A类网络中可…

大数据成长之路:谈谈那些必须学习的Linux基础知识

作者| Roy瑞士责编| Carol封图| CSDN│下载于视觉中国这里主要介绍学习大数据过程中用到的Linux基础知识,现在主攻的方向是大数据开发,欢迎大家共同交流。环境推荐安装VMware虚拟机并安装CentOS操作系统,具体资源的下载和安装可以查到&#x…