HTML5
关注
分享
扫一扫
iteye_5722
这个作者很懒，什么都没留下…
展开
-
HTML5 简介
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 一 什么是 HTML5 HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览...2017-04-06 20:51:43 · 136 阅读 · 0 评论 -
HTML5的音频和视频监听器应用
一 介绍 1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的监听器。 2、本应用实现<video>的ontimeupdate事件的监听器。 3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。 二 代码 <!DOCTYPE html> <html> <...2017-04-12 19:04:25 · 209 阅读 · 0 评论 -
使用JavaScript脚本控制媒体播放
一 介绍 1、在HTML页面中获取<audio>和<video>元素播放音频和视频之外，很多时候我们还需要JavaScript来控制这些元素的播放。 2、在JavaScript中获取<audio>元素对应的对象为HTMLAudioElement的对象，<vidio>元素对应的对象为HTMLVideoElement对象。 3、HTMLAudio...2017-04-11 20:49:13 · 229 阅读 · 0 评论 -
HTML5的video元素和audio元素兼容性
一 介绍 因为各浏览器对音频和视频的支持互不相同，开发者可能希望为<video>和<audio>元素指定多个媒体源，此时可以借助<source>子元素来实现。 二 代码 <!DOCTYPE html> <html> <head> <meta name="author" content2017-04-11 20:46:58 · 207 阅读 · 0 评论 -
HTML5的video元素应用
一 介绍 HTML5 <video> 元素是一个HTML5元素，在HTML4中是非法的，但在所有浏览器中都有效。 该元素使用非常简单，举例如下 二 代码 <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org...2017-04-10 20:32:01 · 144 阅读 · 0 评论 -
HTML5的audio元素应用
一 介绍 HTML5 <audio> 元素是一个HTML5元素，在HTML4中是非法的，但在所有浏览器中都有效。 该元素使用非常简单，举例如下 二 代码 <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.o...2017-04-10 20:23:43 · 125 阅读 · 0 评论 -
Canvas 输出位图
一 介绍 toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。 dataURL是将数据按base64进行编码，它是一种保存二进制的方式。 下面通过这种方法输出位图。 二 代码 <!DOCTYPE html> <html> <head> <meta name="author" content...2017-04-09 08:13:38 · 295 阅读 · 0 评论 -
Canvas 像素处理之高亮处理
一 定义和用法 getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 注意：ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。 对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值： R - 红色（0-255） G - 绿色（0-255） B - 蓝色（0-255） ...2017-04-09 08:06:25 · 375 阅读 · 0 评论 -
Canvas 位图裁剪
一 位图裁剪方法 1、将需要从位图上裁剪的部分定义成Canvas的路径。 2、调用CanvasRenderingContext2D的的clip（）方法把路径剪切出来。 3、绘制位图——此时只要被clip（）的路径覆盖的部分才会被显示出来。 二 代码 <!DOCTYPE html> <html> <head> <meta name="...2017-04-08 08:58:14 · 131 阅读 · 0 评论 -
Canvas 像素处理之改变透明度
一 定义和用法 getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 注意：ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。 对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值： R - 红色（0-255） G - 绿色（0-255） B - 蓝色（0-255） ...2017-04-08 08:56:18 · 385 阅读 · 0 评论 -
Canvas 位图填充
一 位图填充方法 1、调用createPattern方法创建位图填充，该方法返回一个CanvasPattern对象。 2、将CanvasPattern对象赋值给CanvasRenderingContext2D的fillStyle或StrokeStyle属性。 二 代码 <!DOCTYPE html> <html> <head> <me...2017-04-07 19:08:21 · 179 阅读 · 0 评论 -
Canvas 圆形渐变
一 介绍 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下是设置Canvas圆形渐变的方法： createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1. 使用渐变，设置f...2017-04-07 19:01:21 · 366 阅读 · 0 评论 -
Canvas 线性渐变
一 介绍 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下用来设置Canvas的线性渐变： createLinearGradient(x,y,x1,y1) - 创建线条渐变。 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。 使用渐变，设置fillStyle...2017-04-06 20:55:10 · 166 阅读 · 0 评论 -
谷歌浏览器查看HTML文档和DOM视图的对应关系
一 打开谷歌浏览器，按照下图步骤打开【开发者工具】。 二 观察下图，DOM模型中的各个DOM节点，与HTML文档中各个HTML元素正好一一对应。2017-04-12 19:08:48 · 410 阅读 · 0 评论