HTML5程序设计
文章平均质量分 58
HTML5程序设计
109905418
谨慎,优秀,力戒浮躁!
展开
-
Web前端前沿技术 1 ____视频背景
先看效果图主要代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> *{ padding: 0; margin: 0; } .bann原创 2018-04-23 00:24:25 · 1595 阅读 · 1 评论 -
H5之13__CSS过渡、动画和变换
一. 简介在触摸设备上, 动画是用户手势的反馈.在所有浏览器中,JS 是单线程执行的. 如果有异步任务, 比如 setTimeOut() ,会加入到执行队列,然后在线程变得空闲时执行。当 定时器里面的代码执行时, 其他的代码又不能执行了。 也就是说事件处理程序是按队列顺序执行的。由于这些原因, 我们应该尽量避免使用setTimeOut() 动画, 可以使用CSS原创 2017-01-01 15:46:27 · 2324 阅读 · 0 评论 -
H5之12__触摸与单击:基本的事件处理
在HTML5中, 如果基于鼠标的界面互动是单击, 触摸界面的基本交互方式就是 轻触.一. 轻触与单击有相似之处, 但是也有不同.即使触摸设备(例如: 手机) 没有鼠标,它们的浏览器仍然会触发鼠标事件, click, mouseover, mousedown 和 mouseup 都还会被触发。二 移动浏览器有四种类型的触摸事件事件名称描原创 2016-12-04 16:42:48 · 8076 阅读 · 0 评论 -
H5之11__GeoLocation 地理定位
GeoLocation API 通常用于移动设备获取地理位置,严格来说,并不属于H5的标准规范.一 如何使用 GeoLocation API?要使用该API, 通过window.navigator.geolocatio 获得 对地理定位的访问。 该对象有如下三个方法:1. getCurrentPosition()2. watchPosition()3. cle原创 2016-11-30 23:51:03 · 1814 阅读 · 0 评论 -
HTML5之10 __使用 Canvas API创建 热点图
使用Canvas API 可以创建许多应用: 图形、图表、图片编辑, 其中最奇妙的一个应用是修改或覆盖已有内容。 最流行的覆盖图被称为热点图。 热点图可以用在城市地图上来标记交通路况, 或者显示风暴的活动情况。在地图上只需要将canvas 叠放在地图上显示即可。 实际上就是用 canvas 覆盖地图, 然后再基于相应的活动数据绘制出不同的热度级别。 以下提供一个示例. HT原创 2015-05-17 19:50:45 · 3563 阅读 · 0 评论 -
HTML5之9 __Canvas 的Shadow API
本文介绍 Canvas Shadow API , 为文本添加模糊阴影效果. 虽然之前已对 canvas 阴影效果应用 有介绍 , 这里主要介绍对文本的阴影效果.阴影效果的使用也要把握好 "度". 看一个示例文本阴影示例 drawTrails(); function drawTrails() { var canvas =原创 2015-05-17 19:06:17 · 1608 阅读 · 0 评论 -
HTML5之8 __Canvas 文本
canvas API 具有强大的文本功能, 操作canvas 文本与操作其他路径对象 的方式相同: 可以描绘文本轮郭,填充文本内部。文本绘制由两个函数实现:fillText(text, x, y, maxwidth);strokeText(text, x, y, maxwidth);maxwidth 是可选参数, 用于限制字体大小.一个示例原创 2015-05-09 23:42:41 · 975 阅读 · 0 评论 -
HTML5之7 __Canvas: 缩放、旋转、创建阴影
canvas API 的scale() 函数用于缩放. scale() 带有两个参数,分别代表在x, y 两个维度的值, 每个参数在 canvas 显示图像的时候, 向其传递在本方向轴上图像要放大(或缩小) 的量, 如果x为2, 就代表所绘制图像中全部元素都会变成两倍宽, 如果y 值为0.5 ,绘制出来的图像全部元素都会变成之前的一半高。例如以下程序很方便地在canvas 上创建原创 2015-05-09 18:50:00 · 3303 阅读 · 0 评论 -
HTML5之5 __Canvas: 渐变
渐变 Gradient 是一种绘图方式,它应用于颜色上,使用渐变需要三个步骤:1. 创建渐变对象2. 为渐变对象设置颜色,即使用 addColorStop()函数, 指明过渡方式3. 在context 上为填充样式或者描边样式 设置渐变。可以将渐变 看作是颜色沿着一条线进行缓慢地变化.请看代码 渐变 var gr原创 2015-05-08 21:58:01 · 1571 阅读 · 0 评论 -
HTML5 之6 __Canvas: 插入图片, 图片加载完时执行回调
使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容,应当注意: 必须等到图片完全加载后才能对其进行操作, 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将原创 2015-05-08 22:04:10 · 13010 阅读 · 0 评论 -
HTML5之4__Canvas API: 绘制曲线、变换
HTML5 开发 起点之一就是 Canvas, 通过它可以动态生成和展示图形、图表、图像以及动画. 在Canvas 出现之前,开发人员若要在浏览器中使用绘图API, 只能使用 Adobe 的Flash和 SVG(可伸缩矢量图形) 插件, 或者只有IE才支持的VML(矢量标记语言), 以及一些JS技巧。原创 2015-05-07 12:18:34 · 4475 阅读 · 0 评论 -
HTML5之3__测试浏览器是否支持HTML5
在创建HTML5 的标记时,例如canvas等,需要先确保浏览器能够支持它, 如果不支持,必须有提示信息,可以通过以下方法:原创 2015-04-29 13:52:14 · 1043 阅读 · 0 评论 -
HTML5 之2__列表标记
HTML5 的基本标记有很多种,今天介绍列表标记列表标记 列表标记可以在网页中以列表形式排列文本元素, 列表标记有3种: 有序列表,无序列表,自定义列表像: 苹果 桃 称为无序列表, 在FireFox以a,b,c 等显示,其他浏览器以圆点显示; 西红柿 茄子 称原创 2015-04-28 18:01:16 · 1393 阅读 · 0 评论 -
HTML5 程序设计
HTM5 定义了一种新的语义化标记来描述元素的内容,它可以简化HTML页面设计. HTML5 引入了一组新的片段元素,下表列出了新增的语义化标记元素原创 2015-04-26 16:37:19 · 1190 阅读 · 0 评论