canvas教程

HTML5之API总结(2)

字号+ 作者:H5之家 来源:H5之家 2017-01-11 12:00 我要评论( )

createImageData( width, height )、createImageData(imageData) 绘制ImageData对象 getImageData( x, y, width, height )返回ImageData对象,该对象为画布上指定的矩形复制像素数据。 putImageData( ImageData, x,

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,半径,起始弧度,结束弧度,旋转方向)
  • x , y 起始位置
  • 弧度与角度: 弧度=角度 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>
  • 带提示用法
  • < videosrc="文件地址"controls="controls"> 您的浏览器暂不支持video标签。播放视频 </ video>
  • 兼容用法
  • < videocontrols="controls"width="300"> <sourcesrc="move.ogg"type="video/ogg"> <sourcesrc="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才有效

  • Video 的 API 方法
  • 方法 属性 事件

    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
  • 3 : 设置了 timeout 值,获取位置超时了
  •  

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5 new image,磁力链接

      html5 new image,磁力链接

      2017-01-10 12:01

    • 【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

      【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

      2017-01-10 10:00

    • html5 canvas开发详解 pdf

      html5 canvas开发详解 pdf

      2017-01-07 08:00

    • HTML5+CSS3:3D展示商品信息示例

      HTML5+CSS3:3D展示商品信息示例

      2017-01-06 15:03

    网友点评