HTML5_02之视频、音频、Canvas

1、HTML5新特性之视频播放——video:
 ①例:<video src=""></video>
 ②video标签默认为300*150的inline-block;
 ③成员属性:
  autoplay:是否自动播放;
  controls:是否显示播放控件;
  currentTime:当前播放到的时间;
  duration:总时长;
  defaultMuted:默认是否静音;
  loop:是否自动循环播放;
  muted:当前是否静音;
  paused:当前是否处于暂停状态;
  poster:"",在视频播放前的显示图片;
  volumn:当前播放音量;
  preload:预加载内容;取值:auto——自动预加载视频内容,并缓冲一段;metadata——仅预加载影片元素据(宽高时长);none——不预加载任何数据;
 ④成员方法:
  play();——视频开始播放,paused属性变为false;
  paused();——视频暂停,paused属性变为true;
 ⑤成员事件:
  onplay:fn——当调用v.paly()方法时触发;
  onpause:fn——当调用v.pause()方法时触发;
2、HTML5新特性之音频播放——audio:
 ①例:<audio src=""></audio>
 ②audio标签默认为300*30的inline-block,若不显示播放控件,则display为none;
 ③成员属性:
  autoplay:是否自动播放;
  controls:是否显示播放控件;
  currentTime:当前播放到的时间;
  duration:总时长;
  defaultMuted:默认是否静音;
  loop:是否自动循环播放;
  muted:当前是否静音;
  paused:当前是否处于暂停状态;
  poster:"",在视频播放前的显示图片;
  volumn:当前播放音量;
  preload:预加载内容;取值:auto——自动预加载音频元素据内容,并缓冲一段;metadata——仅预加载音频元素据;none——不预加载任何音频数据;
 ④成员方法:
  play();——音频开始播放,paused属性变为false;
  paused();——音频暂停,paused属性变为true;
 ⑤成员事件:
  onplay:fn——当调用v.paly()方法时触发;
  onpause:fn——当调用v.pause()方法时触发;
 ⑥IOS系统自带Safari浏览器不支持audio标签,可使用隐藏的video代替;
3、HTML5新特性之Canvas绘图:
 ①Canvas:画布,默认为300*150的inline-block,设定画布的宽高不能使用CSS Style,只能使用width和height属性;
 ②Canvas画布本身不能绘制内容,只用于承载被绘制的内容,画笔使用原生JS 创建:var ctx=canvas.getContext('2d');
 ③Context对象常用属性:
  fillStyle:"#000000"——填充样式;
  strokeStyle:"#000000"——描边/轮廓样式;
  font:"10px sans-serif"——字体大小、类型
  textAlign:"start"——文本对齐方式;
  textBaseline:"alphabetic"——文本基线;
  globalAlpha:——全局不透明度;
  lineWidth:线/描边宽度;
  shadowOffsetX:阴影在x轴的偏移量;
  shadowOffsetY:阴影在y轴的偏移量;
  shadowColor:"rgba(0,0,0,0)"——阴影颜色及透明度;
  shadowBlur:阴影模糊半径;
 ④Context对象常用方法:
  arc():绘制一个圆弧/圆形;
  beginPath():开始绘制一条路径;
  closePath():闭合一条路径;
  fill():对路径进行填充;
  stroke():对路径进行描边;
  moveTo():移动到某一点;
  lineTo():绘制到另一点的一条线段;
  fillRect():填充一个矩形;
  strokeRect():描边一个矩形;
  clearRect():清空一个矩形范围内的所有内容;
  fillText():填充一个字符串;
  strokeText():描边一个字符串;
  drawImage():绘制图像;
 ⑤创建一个线性渐变对象:
  var g=ctx.createLinearGradient(x1,y1,x2,y2);
  g.addColorStop(offset1,color1);
  g.addColorStop(offset2,color2);
 ⑥绘制矩形(rectangle):定位点位于左上角
  ctx.fillStyle="#000"/渐变对象;——填充样式;
  ctx.strokeStyle="#000"/渐变对象;——描边样式;
  ctx.lineWidth=;——描边宽度;
  ctx.fillRect(x,y,w,h);——填充一个矩形;
  ctx.strokeRect(x,y,w,h);——描边一个矩形;
  ctx.clearRect(x,y,w,h);——清除一个矩形范围内的内容;
 ⑦绘制文本(text):文本定位点在整个字符串文本基线最左边
  ctx.textBaseline="alphabetic";//文本基线,可取值为:top/middle/alphabetic/bottom;
  ctx.font="10px sans-serif";
  ctx.fillText(txt,x,y);
  ctx.strokeText(txt,x,y);
  ctx.measureText(txt).width;//测量文本宽度;

转载于:https://www.cnblogs.com/Jupiter258/p/6058121.html

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

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

相关文章

Win11的这个功能,厉害了!

上周微软正式发布了Windows11的22H2版本&#xff0c;虽说是一周年更新版&#xff0c;但仍然有不少的问题。微软给Win10换了一套皮肤&#xff0c;并做了一些优化升级&#xff0c;摇身一变成了Win11&#xff0c;但是外观方面却做的并不是很协调&#xff0c;有一些界面仍然保留着以…

platform_set_drvdata和platform_get_drvdata用法【转】

本文转载自&#xff1a;http://www.cnblogs.com/wangxianzhen/archive/2013/04/09/3009530.html 在用到Linux设备驱动的platform框架时&#xff0c;常常会遇到两个函数platform_get_drvdata和 platform_set_drvdata。通常&#xff0c;会在驱动的probe函数中获取device的相关信息…

MAUI + Masa Blazor 开发带自动更新功能的安卓App

自动更新主要下面4个步骤获取最新版本号提示用户发现更新&#xff0c;等待用户确认更新下载最新的apk包安装apk包下面从创建MAUI项目开始1、创建Maui Blazor Server应用2、安装Masa.Blazor&#xff0c;并添加引用dotnet add package Masa.Blazor在 wwwroot/index.html 中引入资…

WebApi 将 DataRow、DataTable转换成JObject返回

/// <summary> /// 扩展&#xff1a;将object强制转化为int /// </summary> /// <param name"o">要强制转换的object</param> /// <param name"defaultValue">o为null或者转换失败的默认值</param> /// <returns&g…

空间矢量数据(.shp文件)之JAVA操作

Shape文件由ESRI开发。一个ESRI&#xff08;Environmental Systems Research Institute&#xff09;的shape文件包含一个主文件&#xff0c;一个索引文件&#xff0c;和一个dBASE表。当中主文件的后缀就是.shp。 Shape文件已经是一种开源的文件格式。官方早在2006年就出版了对应…

[deviceone开发]-一个很炫的手势动画示例

2019独角兽企业重金招聘Python工程师标准>>> 一、简介 这是iOS下的效果&#xff0c;android下完全一致。通过do_GestureView组件和do_Animation组件&#xff0c;deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合…

POJ-3067 Japan---树状数组逆序对变形

题目链接&#xff1a; https://vjudge.net/problem/POJ-3067 题目大意&#xff1a; 日本岛东海岸与西海岸分别有N和M个城市&#xff0c;现在修高速公路连接东西海岸的城市&#xff0c;求交点个数。 解题思路&#xff1a; 记每条告诉公路为(x,y), 即东岸的第x个城市与西岸的第y个…

C# 笔迹擦除8边形

本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。原文作者&#xff1a;唐宋元明清原文地址&#xff1a; https://www.cnblogs.com/kybs0/p/16593146.htmlC# 笔迹擦除8边形擦除区域与橡皮大小不一致测试反馈&#xff0c;擦除区域与真实的橡皮大小不一致&#…

资深私域运营必知的100个专业名词!

来源 | 晏涛三寿 &#xff08;ID&#xff1a;yantao-219&#xff09; 作者 | 晏涛 如今私域相关人才进入了供不应求的状态&#xff0c;不少企业开始设置专门的岗位&#xff0c;私域运营也成为了招聘市场中的“香饽饽”。 但是想要成为一名优秀的私域运营并不容易&#xff0c;…

【错误解决】[Maven] cannot be opened because it does not exist错误[文件无法编译到target目录下的解决方法]...

转载请注明出处&#xff1a;http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 使用IDEA搭建的Maven项目&#xff0c;在写SpringEL和资源调用时出现了如下错误: 相信我&#xff0c;代码没问题的、 Caused by: java.io.FileNotFoundException: class path res…

JQ插件 jquery mobiscroll

参数&#xff1a; theme是指主题 display&#xff1a;bottom 是指弹出框的位置&#xff0c;分别可以使用top,bottom,inline来定义&#xff0c;这里解释一下inline的用法:inline的话就可以实现页面一加载就能看到这个弹出框&#xff0c;如果使用top和bottom,则必须使得输入框获得…

commons-lang3:DateUtils

2019独角兽企业重金招聘Python工程师标准>>> /** * 以秒为标准时间的毫秒数 */ public static final long MILLIS_PER_SECOND 1000 /** *以分钟为标准时间的毫秒数 */ public static final long MILLIS_PER_MINUTE 60 * MILLIS_PER_S…

SVN配置提交代码自动部署

最近新开了web端项目&#xff0c;前端开发完成后&#xff0c;需要将打包文件再替换到web目录&#xff0c;感觉有点麻烦&#xff0c;于是想找找一劳永逸的方法&#xff0c;恰好配置svn的 post-commit可以实现此功能&#xff0c;在此记录下来。 hooks SVN安装路径下有个hooks文件…

Blazor University (46)依赖注入 —— Transient 依赖

原文链接&#xff1a;https://blazor-university.com/dependency-injection/dependency-lifetimes-and-scopes/transient-dependencies/Transient 依赖Transient 依赖是最容易理解的。在构建注册为 Transient 的可注入依赖项时&#xff0c;依赖项容器只是充当工厂。一旦实例被创…

AM335x 添加 HUAWEI MU609 Mini PCIe Module,并用pppd 启动相关设备

kernel 的配置kernel 3.2.0make menuconfigDevice Drivers --->[*] USB support ---><*> USB Serial Converter support ---><*> USB driver for GSM and CDMA modems kernel 3.2.0make menuconfigDevice Drivers --->[*] Network device supp…

深度挖掘 Laravel 生命周期

本文首发于个人博客 深度挖掘 Laravel 生命周期&#xff0c;转载请注明出处。这篇文章我们来聊聊 「Laravel 生命周期」 这个主题。虽然网络上已经有很多关于这个主题的探讨&#xff0c;但这个主题依然值得我们去研究和学习。 我想说的是当我们在决定使用某项技术的时候&#x…

构建LAMP平台及应用系统

LANP架构指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务及其应用开发环境。LAMP是一个缩写词&#xff0c;具体包括linux操作系统、apache网站服务器、mysql数据库服务器、PHP&#xff08;或Perl、Python&#xff09;网页编程语言。在构建LAMP平台时…

C# DataRow 转 Model 对象 再也不用一个字段一个字段去写了

/*************************************************************************************** 文 件 名: DalUtiles.cs* 描 述: * * 版 本&#xff1a; V1.0* 创 建 者&#xff1a; JackieZheng* 创建时间&#xff1a; 2022/10/16 下午 05:42* * 历史更新记录* 版本…

pyqt2_官网教程

sklearn实战-乳腺癌细胞数据挖掘&#xff08;博主亲自录制视频&#xff09; https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare Articles You can find a collection of P…