html5

谷歌地图API 开发 之 获取坐标以及街道详情

自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求。估计这个对于新手来说,还是比较麻烦的,因为从官网上找这个也并不是很好找,要找好久的,运气好的可能会一下子找到。献上自己写的测试案例。代码如下: Simple Map html, body { height: 100%; margi

谷歌地图API 开发 之 Geocoding API

大部分项目还是都有要获取当前点击的坐标经纬度或者获取当前街道的信息的,然而谷歌API 的文档也并不是很直观。官网地理编码服务地址:https://developers.google.com/maps/documentation/javascript/geocoding在服务栏里的地理编码里,为什么说是服务呢,用谷歌翻译了下,发现想获取坐标以及街道详情,需要调用谷歌的地理编码

(2/2)Canvas的交互&存为图片-爬坑篇

需求介绍page2上的canvas可交互,并实时显示交互结果;点击下一步,page2消失,page3显示;page3显示的是一张图片,图片有canvas交互区和另外的一些元素组成。实现思路canvas重绘运用canvas重绘的方法可以实时同步canvas的交互结果。canvas重绘:在canvas有交互操作时,先清空画布,将canvas中所有的元素都重新画到画布上;var

(1/2)Canvas的交互&存为图片-基本篇

前言公司的产品同学看到朋友圈疯传的这场图后。一拍脑袋,决定做个H5版本的来推广一波。需求如下:文字变成可以点击的,而且还要能够变色(闪瞎有木有)中间的姓名换成用户的微信头像点击button后,将canvas的操作结果保存成图片,来现微信长按保存到本地的功能。难点总结:页面元素canvas基本的api画到画布上(要解决显示自适应的问题);如何实现点击canvas,识别点击文字

Web存储之LocalStorage初探

Web存储之LocalStorage初探HTML5的发布和定稿为前端界带来巨大的变化,新增的API和特性给业务带来了更多可能性,让用户体验拥有了更可能的丰富。· HTML Geolocation 可以定位到用户的地理位置· HTML Drag and Drop 拖拽API,可以实现更简单有效的交互方式· HTML Local Storage 本地存储方案, 配合离线缓存

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

用 DIV + CSS3 画小黄人仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦。那就没意思了。[br]有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了。这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类、不同身材的小黄人。GitH

一个成功的 H5,要击中用户要害,达到运营目的

我们都在竭尽心力想做出一个成功的H5作品。1. 什么是H5暂先不说“成功”如何定义,你能告诉我什么是H5吗?我们都知道,H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词,难道我们平日所指的就是这个技术名词吗?显然不是。准确的说,我们所说的是 以Html5方式实现的在移动端展示的功能页面。 如果把页面比作人,那么HTML是他的骨架,CSS是他的肌肉皮肤,J

一个成功的 H5,要击中用户要害,达到运营目的

我们都在竭尽心力想做出一个成功的H5作品。1. 什么是H5暂先不说“成功”如何定义,你能告诉我什么是H5吗?我们都知道,H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词,难道我们平日所指的就是这个技术名词吗?显然不是。准确的说,我们所说的是 以Html5方式实现的在移动端展示的功能页面。 如果把页面比作人,那么HTML是他的骨架,CSS是他的肌肉皮肤,Ja

原型制作 | 我用HTML5工具,做了一个支付宝9.9版的原型

最近支付宝进行了一次比较大的版本更新,引起了很多人的关注,无论从视觉还是交互体验上都有了很大的改变,但是从原型制作来说,其实比之前更加简单了。通过临摹这些知名厂商的产品,是快速进步的一种方式,可以更好的借鉴他们的交互与逻辑,比体验观看,更能深刻的理解,从而更好的改进自己的产品。说到原型,很多人就会想到Axure,这类常用的原型工具,他们使用的都是HTML规范,动效以及交互大