一、canvas api


canvas apiH5标准中最复杂的部分, 它提供几种属性和方法,可以在canvas元素上创建图形应用

方法


以下方法专门用于调用canvas api

  • getContext(context)创建可绘制图形的画布上下文,接受两个值,2d3d

  • fillRect(x,y,width,height)绘制实心矩形

  • strokeRect(x,y,width,height)绘制矩形轮廓

  • clearRect(x,y,width,height)清除画布指定区域内容

  • createLinearGradient(x1,y1,x2,y2)创建一个线性渐变效果

  • createRadialGradient(x1,y1,r1,x2,y2,r2)创建一个放射渐变效果

  • addColorStop(position,color)用于声明渐变颜色position范围是0.0-1.0 用于确定颜色开始变化位置

  • beginPath()开始一条新路径

  • closePath()在路径最后实现封闭该路径,它会生成一条直线,连接笔触的最后一个位置与路径的起点。如想要保持路径开放,使用fill()绘图,不用这个方法

  • stroke() 用于创建路径轮廓

  • fill()用于绘制实心形状

  • clip()用于创建一个由路径定义的裁剪区域,只有在落入形状内的内容才绘制到画布上

  • moveTo(x,y)将虚拟笔触移到新位置,下一个方法会从改点的开始继续设置路径

  • lineTo(x,y)在新路径上添加一条直线

  • rect(x,y,width,height)在路径为(x,y)位置上添加widthheight矩形

  • arc(x,y,radius,startAngle,endAngle,direction)在路径上添加一条弧线 ,x,y指定弧线的中心,角度单位为弧度,direction是一个表示顺时针或逆时针的布尔值。使用公式 Math.PI/180x角度,将角度转换为半径

  • strokeText(text,x,y,max) 直接在画布上绘制文字轮廓。可选参数,max声明文字最大尺寸

  • fillText(text,x,y,max)直接在画布上绘制实心文字。可选参数,max声明文字最大尺寸

  • translate(x,y)将画布原点移到点(x,y)处,原点(0,0)初始位置位于canvas所在区域的左上角

  • rorate(angle)这个方法可以使画布原点为中心发生旋转,角度必须是弧度。使用公式Math.PI/180x 将角度转换为弧度

  • scale(x,y) 改变画布比例 默认值是(1.0,1.0)这些值可以是负值

  • transform(m1,m2,m3,m4,dx,dy)修改画布的转换矩阵。新矩阵是基于之前的矩阵得到的

  • setTransform(m1,m2,m3,m4,dx,dy)修改画布的转换矩阵。重置之前的值,声明新的值

  • save()保存画布状态,包括转换矩阵、样式属性、裁剪遮罩

  • restore() 恢复上一次保存的状态

  • drawImage() 在画布上绘制图像

属性


canvas api专用属性列表

  • rect( x, y, width, height ) 绘制矩形
  • fillRect( x, y, width, height ) 绘制被填充的矩形
  • strokeRect( x, y, width, height ) 绘制矩形(无填充)
  • clearRect( x, y, width, height ) 清除指定的矩形内的像素

  • fill() 填充当前绘图(路径)

  • stroke()绘制已定义的路径
  • beginPath() 起始(重置)当前路径
  • moveTo( x, y ) 将笔触移动到指定的坐标(x,y)
  • lineTo( x, y ) 绘制一条从当前位置到指定的坐标(x,y)的直线
  • clip() 从原始画布剪切任意形状和尺寸的区域
  • quadraticCurveTo() 创建二次贝塞尔曲线
  • bezierCurveTo() 创建三次贝塞尔曲线
  • arc( x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆或圆弧
  • arcTo( x1, y1, x2, y2, radius) 根据给定点画圆弧,再以直线连接两个点
  • isPointInPath( x, y ) 检测指定的点是否在当前路径中,在则返回true。

  • fillStyle 设置或返回用于填充绘画的颜色、渐变或模式

  • strokeStyle 设置或返回用于笔触的颜色、渐变或模式
  • shadowColor 设置或返回用于阴影的颜色
  • shadowBlur 设置或返回用于阴影的模糊级别
  • shadowOffsetX 设置或返回阴影与形状的水平距离
  • shadowOffsetY 设置或返回阴影与形状的垂直距离

  • lineCap 设置或返回线条的结束点样式(buttroundsquare

  • lineJoin 设置或返回当两条线交汇时,边角的类型(bevelround、miter)
  • lineWidth 设置或返回当前的线条宽度
  • miterLimit 设置或返回最大斜接长度

  • createLinearGradient( x0, y0, x1, y1 ) 创建线性渐变

  • createPattern( image/canvas/video, repeat ) 在指定的方向内重复绘制指定的元素
  • createRadialGradient( x0, y0, r0, x1, y1, r1 )创建径向渐变
  • addColorStop( stop, color ) 规定渐变对象中的颜色和停止位置

  • font 设置或返回文本内容的当前字体属性(和css的font一样)

  • textAlign 设置或返回文本内容的当前对齐方式
  • textBaseline 设置或返回在绘制文本时使用的当前文本基线
  • fillText( text, x, y ) 在画布上绘制“被填充”的文本
  • strokeText( text, x, y ) 在画布上绘制文本(无填充)
  • measureText( text ) 返回包含指定文本宽度的对象(属性width获取宽度)

  • drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )` 在画布上绘制图像、画布或视频

  • createImageData( width, height )、createImageData(imageData) 绘制ImageData对象

  • getImageData( x, y, width, height ) 返回ImageData对象,该对象为画布上指定的矩形复制像素数据。
  • putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ) 把图像数据放回画布上。
  • width 返回ImageData对象的宽度
  • height 返回ImageData对象的高度
  • data 返回一个对象,包含指定的ImageData对象的图像数据

  • globalAlpha 设置或返回绘图的当前alpha或透明度

  • globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上。

  • scale( x, y ) 缩放当前绘图

  • translate( x, y ) 重新设置画布上的(0,0)位置
  • rotate( angle ) 选择当前绘图,单位为“弧度”,角度转弧度公式( degrees*Math.PI/180)
  • transform( m11, m12, m21, m22, dx, dy ) 替换绘图的当前转换矩阵
  • setTransform() 将当前转换重置为单元矩阵,然后运行transform()

  • save() 保存当前环境的状态

  • restore() 恢复之前保存过的路径状态和属性

  • getContext('2d') 获取2d对象

  • toDataURL() 将canvas转换成图片,返回地址

canvas常用总结


  • 标签 <canvas>
    • 不支持canvas 的浏览器可以看到的内容
  • <canvas> 绘制环境
    • getContext("2d");目前支持2d的场景
  • 绘制矩形
    • rect(L,T,W,H):创建一个矩形
    • fillRect(L,T,W,H):绘制填充的矩形
    • strokeRect(L,T,W,H)绘制矩形(无填充)
      • 默认一像素黑色边框
  • 设置绘图
    • fillStyle:填充颜色(绘制canvas是有顺序的)
    • lineWidth:线宽度,笔迹粗细
    • strokeStyle:边线颜色
  • 绘制路径

    • stroke :绘制,划线(黑色默认)
    • fill :填充(黑色默认)
    • rect(矩形区域)
    • clearRect 擦除一个矩形区域
    • save 进入到XXX(高逼格)状态
    • restore 退出xxx(高逼格)状态
  • 绘制圆形

    • arc(x,y,半径,起始弧度,结束弧度,旋转方向)
    • xy起始位置
    • 弧度与角度:弧度=角度 x π / 180
    • 旋转方向:顺时针(默认:false),逆时针(true
  • 绘制字体
    • font:设置字体大小
    • fillText:填充字体
    • strokeText:绘制字体

二、视频音频


  • 视频音频格式的简单介绍
    • 常见的视频格式
      • 视频的组成部分:画面、音频、编码格式
      • 视频编码:H.264、Theora、VP8(google开源)
    • 常见的音频格式
      • 视频编码:ACC、MP3、Vorbis
  • html5能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。
  • 支持的视频格式:
    • Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件
    • MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
    • WebM=带有VP8视频编码+Vorbis音频编码的WebM格式

Video的使用


  • 单独用法
    • <video src="文件地址" controls="controls"></video>
  • 带提示用法
1
2
3
< video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >
  • 兼容用法
1
2
3
4
5
< video  controls="controls"  width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
  • Video的常见属性
属性 描述
Autoplay Autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
Width Pixels(像素) 设置播放器宽度
Height Pixels(像素) 设置播放器高度
Loop Loop 播放完是否继续播放该视频,循环播放
Preload load{auto,meta,none} 规定是否预加载视频。
Src url 视频url地址
Poster Imgurl 加载等待的画面图片
Autobuffer Autobuffer 设置为浏览器缓冲方式,不设置autoply才有效
  • Videoapi方法
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType() videoHeight error

三、地理信息与本地存储


地理位置


  • 经度 : 南北极的连接线
  • 纬度 : 东西连接的线

  • 位置信息从何而来

    • IP地址
    • GPS全球定位系统
    • Wi-Fi无线网络
    • 基站
  • avigator.geolocation

    • 单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
    • 请求成功函数

      • 经度 : coords.longitude
      • 纬度 : coords.latitude
      • 准确度 : coords.accuracy
      • 海拔 : coords.altitude
      • 海拔准确度 : coords.altitudeAcuracy
      • 行进方向 : coords.heading
      • 地面速度 : coords.speed
      • 请求的时间: new Date(position.timestamp)
    • 请求失败函数

      • 失败编号 :code
        • 0 : 不包括其他错误编号中的错误
        • 1 : 用户拒绝浏览器获取位置信息
        • 2 : 尝试获取用户信息,但失败了
        • 3 : 设置了timeout值,获取位置超时了
    • 数据收集 : json的形式

      • enableHighAcuracy : 更精确的查找,默认false
      • timeout : 获取位置允许最长时间,默认infinity
      • maximumAge : 位置可以缓存的最大时间,默认0
    • 多次定位请求* : watchPosition

      • 移动设备有用,位置改变才会触发
      • 配置参数:frequency 更新的频率
      • 关闭更新请求 : clearWatch
    • 百度地图api

1
<script src="http://api.map.baidu.com/api?v=2.0&ak=qZfInp9MaT9Qa0PoNy4Rmx3Y9W9ZXMfw"></script>

本地存储


  • Storage

    • sessionStorage
      • session临时回话,从页面打开到页面关闭的时间段
      • 窗口的临时存储,页面关闭,本地存储消失
    • localStorage
      • 永久存储(可以手动删除数据)
  • Storage的特点

    • 存储量限制 ( 5M )
    • 客户端完成,不会请求服务器处理
    • sessionStorage数据是不共享、 localStorage共享
  • Storage api

    • setItem():
      • 设置数据,(key,value)类型,类型都是字符串
      • 可以用获取属性的形式操作
    • getItem():
      • 获取数据,通过key来获取到相应的value
    • removeItem():
      • 删除数据,通过key来删除相应的value
    • clear():
      • 删除全部存储的值
  • 存储事件:

    • 当数据有修改或删除的情况下,就会触发storage事件
    • 在对数据进行改变的窗口对象上是不会触发的`
    • Key : 修改或删除的key值,如果调用clear(),keynull
    • newValue : 新设置的值,如果调用removeStorage(),keynull
    • oldValue : 调用改变前的value
    • storageArea : 当前的storage对象
    • url : 触发该脚本变化的文档的url
    • 注:session同窗口才可以,例子:iframe操作

四、html5拖拽


  • 图片自带拖拽功能
  • 其他元素可设置draggable属性
  • draggable :true

    • 拖拽元素(被拖拽元素对象)事件 :
      • ondragstart : 拖拽前触发
      • ondrag :拖拽前、拖拽结束之间,连续触发
      • ondragend :拖拽结束触发
    • 目标元素(拖拽元素被拖到的对象)事件 :
      • ondragenter :进入目标元素触发
      • ondragover:进入目标、离开目标之间,连续触发
      • ondragleave :离开目标元素触发
      • ondrop :在目标元素上释放鼠标触发
        • 需要在ondragover事件里面阻止默认事件
  • 拖拽兼容问题

    • 火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签

      • dataTransfer对象
      • setData() : 设置数据 keyvalue(必须是字符串)
      • getData() : 获取数据,根据key值,获取对应的value
      • effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove,move, alluninitialized)

      • setDragImage :三个参数(指定的元素,坐标X,坐标Y

      • files: 获取外部拖拽的文件,返回一个filesList列表
        • filesList下有个type属性,返回文件的类型
  • 读取文件信息
    • FileReader(读取文件信息)
      • readAsDataURL
    • 参数为要读取的文件对象
      • onload当读取文件成功完成的时候触发此事件
      • this. result 获取读取的文件数据

五、跨文档操作


  • 跨文档请求

  • 同域跨文档

    • iframe内页:
      • 父页面操作子页面:contentWindow
      • 子页面操作父页面:window.top(找到最顶级的父页面)/parent(第一父页面)
      • 新窗口页:
        • 父页面操作子页面:window.open
        • 子页面操作父页面:window.opener
  • 不同域跨文档

    • postMessage(“发送的数据”,”接收的域”)
      • message事件监听
      • ev.origin发送数据来源的域
      • ev.data 发送的数据
    • 通过判断发送的数据来执行相应的需求
  • ajax跨域

    • XMLHttpRequest 新增功能

      • 跨域请求:修改服务端头信息
        • IE兼容:XDomaiRequest
    • 进度事件:

      • upload.onprogress(ev) 上传进度(实现文件上传进度条)
        • ev.total 发送文件的总量
        • ev.loaded 已发送的量
      • FormData 构建提交二进制数据

转载请保持原始链接

原始链接: https://ru23.com/note/6cc0c2d4.html