热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

H5中画布、拖放事件以及音视频的代码实例-

这篇文章给大家介绍的内容是关于H5中画布、拖放事件以及音视频的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
这篇文章给大家介绍的内容是关于H5中画布、拖放事件以及音视频的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、拖放事件

1.1 设置拖拽

给标签设置一个draggable设置为true, 标签就可以拖拽了

1.2 拖拽事件

1.2.1拖拽元素事件 (事件对象为被拖拽元素)

  • ondragstart 拖拽前触发

  • ondragend 拖拽结束触发

  • ondrag 拖拽前、拖拽结束之间,连续触发

看实例:

1.2.2 目标元素事件 (俗解:意思就是拖拽的元素放在哪里)

  • ondragenter 进入目标元素触发,相当于mouserover

  • ondragover 进入目标,离开目标之间,连续触发

  • ondragleave 离开目标元素触发,相当于mouseout

  • ondrop 在目标元素上释放鼠标触发(要想触发drop事件,就必须在ondragover的时间中阻止默认事件)

1.2.3 even下的 dataTransfer 对象

  • setData() : 设置数据 key 和 value (必须是字符串)

  • getData() : 获取数据,根据 key 值,获取对应的value

  • effectAllowed : 拖住到相应区域时显示的光标样式(none、copy、copyLink、copyMove、link、linkMove、move、all、和uninitialized)

  • setDragImage() (当这个传递的节点隐藏的时候只支持Firefox)

他是拖住时显示的图形和样式 , 有三个参数:指定的元素(指点的阴影样式),坐标X 坐标Y(x、y是拖拽时鼠标的位置)

小案例:

     #box{margin-left:150px;}
    #box1 img{display: block;width:100px;height:100px;float:left;margin-left:20px;}
      

实例效果图:

方法二:Onload()事件函数:当函数文件读取成功完成的时候触发此事件。(this.result用来获取读取到的文件数据,如果是图片,将返回base64格式的图片数据)

小案例:拖拽文件上传:

    #box{width:200px;height:200px;line-height:200px;text-align:center;border:5px dashed #eeee;background:pink;}
     

请将图片拖到此区域

二、canvas(画布)

2.1 什么是canvas?

  • canvas是HTML5提供的一种新标签

  • canvas是一个矩形区域的画布,可以用Javascript在上面绘画

  • canvas 标签使用 Javascript 在网页上绘制图像,本身不具备绘图功能

  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

  • HTML5之前的web页面只能用一些固定样式的标签:比如p、p、h1等,但有了canvas Web页面可以可以丰富多彩

2.2 canvas 的应用领域

  • 游戏。canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛

  • 可视化数据.数据图表,比如:百度的echart

  • banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过

2.3 canvas 绘图基础

2.3.1 canvas 标签的属性和语法

  • 标签名canvas,需要进行闭合。就是一普通的html标签

  • 可以设置width和height属性,但是属性值单位必须是px,否则忽略

  • width和hegiht:默认300*150像素

  • 注意:1.不要用CSS控制它的宽和高,会走出图片拉伸

2.重新设置canvas标签的宽高属性会让画布擦除所有的内容

3.可以给canvas画布设置背景色

2.4 canvas绘图上下文 (context)

  • 上下文:上知天文,下知地理。是所有的绘制操作api的入口或者集合。

  • Canvas自身无法绘制任何内容。Canvas的绘图是使用Javascript操作的

  • Context对象就是Javascript操作Canvas的接口

  • 使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文

    
    

2.5 基本的绘制路径

2.5.1 canvas 坐标系

canvas 的坐标系从最左上角开始(0,0) .X 向右增大,Y向下增大

2.5.2 设置绘制起点(moveTo)

  • 语法:ctx.moveTo(x,y)

  • 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置

  • 参数:x,y都是相对于canvas盒子的最左上角

  • 注意:1. 绘制线段钱必须先设置起点,不然绘制无效

2.如果不设置起点,就会使用lineTo 的坐标当做moveTo

2.5.3 绘制直线(lineTo)

  • 语法:ctx.lineTo(x,y)

  • 解释:从x,y的位置绘制一条直线到起点或者上一个线头点

  • x,y 线头点坐标

绘制第一条直线:

        
    

2.5.4 路径的开始与闭合

  • 开始路径:ctx.beginPath();

  • 闭合路径:ctx.closePath();

  • 解释:如果复杂路径绘制,必须使用路径开始和结束,闭合路径会自动把最后的线头和开始的线头连在一起

  • beginPath: 核心的作用是将不同绘制的形状进行隔离,每次执行此方法,表示重新绘制一个路径,跟之前绘制的墨迹可以进行分开样式设置和管理

画一个三角形:

       
    

2.5.5 描边(stroke)

    • 语法:ctx.stroke();

    • 解释:根据路径绘制线。路径只是草稿,真正绘制线必须执行stroke

    • canvas 绘制的基本步骤

    1. 获得上下文 →canvasElem.getContext('2d');

    2. 开始路径规划 →ctx.beginPath()

    3. 移动起始点 → ctx.moveTo(x, y)

    4. 绘制线(矩形、圆形、图片...) → ctx.lineTo(x, y)

    5. 闭合路径 → ctx.closePath();

    6. 绘制描边 → ctx.stroke();

    2.5.6 绘制表格

        
        

    2.5.7 填充(fill)

    • 语法:ctx.fill();

    • 解释:填充是将闭合路径的内容填充具体的颜色。默认黑色

    eg:

        
        

    2.5.8 快速创建矩形(rect() 方法)

    • 语法:ctx.rect(x, y, width, height)

    • 解释:x, y是矩形左上角坐标, width和height都是以像素计

    • rect方法只是规划了矩形的路径,并没有填充和描边

         
        

    eg:

         
        

    eg:

          
        

    2.5.10 清除矩形(clearRect())

    • 语法:ctx.clearRect(x,y,w,h);

    • 解释:清除某个矩形内的绘制的内容,相当于橡皮擦

    2.6 绘制圆形

    2.6.1 概述:arc() 方法创建弧/曲线(用于创建圆或部分圆)

    • 语法:ctx.arc(x, y, r, sAngle, eAngle, counterclockwise)

    • 解释:x,y 圆心坐标,r 半径大小,sAngle:绘制开始的角度。圆心到最右边点为0度,顺时针方向弧度增大。eAngle:结束的角度,注意是弧度( π)。counterclockwise:是否是逆时针,true是逆时针,false:顺时针

    • 弧度和角度的转换公式: rad = deg*Math.PI/180

    eg:

         
        

    绘制扇形占比

    eg:

         
        

    2.7 绘制图片

    2.7.1 用JS创建 img 对象

    1. var img = document.getElementById("imgId")

    2. var img = new Image();//这个就是 img标签的dom对象

    img.src = "imgs/arc.gif";

    img.alt = "文本信息";
    img.Onload= function() {
        //图片加载完成后,执行此方法

    2.7.2 基本绘制图片的方式

    • 语法:context.drawImage(img,x,y);

    • 解释:x,y绘制的是图片左上角的坐标,img 是绘制图片的 dom 对象

    eg:

        
        

    2.7.3 在画布上绘制图像,并规定图像的宽度和高度

    • 语法:context.drawImage(img,x,y,width,height)

    • 解释:width绘制图片的宽度,height 绘制图片的高度

    • 注意:如果指定宽高,最好成比例,不然图片会被拉伸

    • 等比公式:设置高 = 原高度 * 设置宽/ 原宽度

    eg:

        
       

    2.7.4 图片裁剪,并在画布上定位被裁剪的部分

    • 语法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

    • 参数说明:sx,sy裁剪的左上角坐标,swidth:裁剪图片的宽度,sheight:裁剪的高度。

    eg:

         
        

    三、音视频

    3.1 使用标签

    • audio

    音频标签 , 使用 cOntrols= "" 将控件展示出来

    • video

    视频标签,使用 cOntrols= "" 将控件展示出来

    • source

         
         使用source标签可以设置多个源

    3.2 音视频元素( 用来控制音视频 )

    3.2.1 标签属性

    • controls:显示或隐藏用户控制界面

    • autoplay:媒体是否自动播放

    • loop:媒体是否循环播放

    eg:

        
     

    3.2.3 事件绑定

    • 补充知识点:addEventListener(type, fn, false)

    false,表示不使用捕获(useCapture)

    #### 3.2.3.1 DOM事件的三个阶段

    • 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象

    • 目标阶段:到达目标事件位置(事发地),触发事件

    • 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象

    • 注意: 当事件触发在目标阶段时,会根据事件注册的先后顺序执行,在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件,也注册了捕获事件,则按照注册顺序执行。

    3.2.4 音视频绑定事件

        
        

    Volumechange


推荐阅读
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 【影评】大内密探灵灵狗
    本文是对王晶执导的电影《大内密探灵灵狗》进行的影评。文章称赞了王晶的才华和导演经验,认为演员阵容强大,笑料不少,发明新奇又好笑。然而,编剧的表现被认为是本片的最大失败,宣传言过其实,笑点不多。总体来说,本片是一部典型的王式喜剧,可看性较高,但没有突破。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • 说到C语言的语句块,真是一堆血泪史。第一大坑就是优先级。刚工作那会儿,C的书没看几本,自信满满的认为C语言都会了,拿出搞ACM培养的豪情壮志,代码倒是写得爽,却到处留 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • 我只是互联网中的菜鸟一个,由于心血来潮也整了一个个人站,但在网络中游荡了大半个世纪,才发现给网站定位是多么的重要,只有好的运营模式及盈利模式,网站才能发展的更好,否则累死也赚不服务 ... [详细]
  • pyecharts 介绍
    一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]
  • JavaWeb介绍概念JavaWeb,是用Java技术来解决相关web互联网领域的技术总和。web包括:web服务器和web客户端两部分。Java在客户端的应用有javaapplet,不过使 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
author-avatar
longfeiPHP
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有