HTML5之转动的轮子

<!doctype html><html> <head></head> <body> <canvas width="1000" height="800" style="background:#abcdef" id="canvas"> 您的浏览器当前版本不支持canvas标签 </canvas> <button onclick="…

打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能…

矢量化的HTML5拓扑图形组件设计

HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html 矢量可无级缩放,界面不失真不模糊描述矢量的文本内容远比图片小得多目前各种window.devicePixelRatio不一致的设备,矢量可能是唯一彻底的解决方案业务数据绑定提起矢量一般都会想到SVG,但这是个坑人的玩意儿,这么多年就没见一个完善的实现者,浏览器实现千差万别,高级属性根本不能玩…

HTML5游戏设计与开发小白7-9月的动态

好久没有更新博客了,最近在努力修炼提升逼格,当然了还有个恶心的毕业论文... 当然啦...在写这个论文的时候也就是为了提升下自身的技术,毕竟我的公司也不是游戏公司,SO 我决定开发个手机游戏.然后考虑到用户一般也就4种情况会玩手机,上下班,上厕所,睡觉前,上班没事干又不能用电脑玩的情况..... 所以设计的局限性...初步的构思“能一只手完成各种操作”....所以期待我能写出高逼格的3D RPG手机游戏的,可以回家洗洗睡了.... 当然了做的时候,考虑到装逼之类的特性...准备至少需要有分享到朋…

设计师必看的10个HTML5动画工具

如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人数急剧增长.开发人员可以使用这种语言来创建各种改进的内容并放到万维网上.随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占据了制高点. HTML5使用起来非常方便,并且能够提供多种功能.例如内置的视觉元素,指定的结构标记,互动的拖放功能等.开发人员可以利用这些功能来创建充满吸引力的网站.此外…

HTML5实现动画三种方式

编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真! 分三种方式实现: (1) canvas元素结合JS (2) 纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE) (3) CSS3结合Jquery实现知道如何使用CSS3动画比知道如何使用<canvas>元…

html5 canvas 圆形抽奖的实例

年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也可以替换上图,嘿嘿,给大家做个事例,如有bug,请以评论的形式提出. 代码如下复制代码 <!doctype html><html lang="en"><head><meta charset="UTF-8"><ti…

WeX5与阿里内测的Weex与有何纠葛？快来看HTML5开发圈那些逗逼事儿！

4月21日~23日,由infoQ主办的2016 Qcon大会北京站如期举行. HTML5开发已经成为移动开发/前端专题中无可争议的焦点,核心议题已经由前几年的是否该用HTML5转向了如何高性能.高效率的做好HTML5应用开发. WeX5和Weex谁是李鬼? 本次大会出现了一对李逵和李鬼:WeX5和Weex.阿里在大会上高调宣布Weex将于6月份开源,而在大会忙坏了的却是参展的WeX5.在WeX5的展台上,总有参会者上前询问:Weex跟WeX5神马关系? 同样都称为HTML5开发工具,名称又如此相…

《HTML5经典坦克大战》游戏（代码）

前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而做的.(淘课学院)http://www.taokeschool.com/ <经典坦克大战>游戏截图 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <…

Make Things Move -- Javascript html5版（一）文件目录结构和工具方法准备

从这一篇开始,就来开始我们的make things move之旅吧在此之前,要知道ActionScript(AS)的语法和JS是不一样的,AS是相对于JS而言更好的支持了面向对象的特性,所以我们可以自己实现一些简单的工具类,让我们更快速的构建我们的工程.不过我们不用全部实现AS中的东西,我们只用实现最基本的类的构造,类的继承和其他一些实用的工具函数就好了. 其实我还想说的是,我们还是要实现AS的Sprite类和stage,因为这两个东西是实现AS动画最基本的元素,html5 canvas提供的…

html5 PACS漫谈

2012年html5标准制定之后,其中canvas标签给程序猿提供了图像绘制的接口. 在医疗领域从事PACS开发的我发现BS结构的PACS系统开发有了新可能,不再需要客户端安装flash.activex.silverlight,可以随时随地跨平台使用,前景一时令人无比激动!紧接着我对html5开发dicom浏览器也进行了初步尝试,全部从底层开始写,实现了图像的加载显示.缩放.调窗.移动.翻页,后来由于后续忙于其他项目和工作变动,此项工作就搁浅了. 一晃眼4年过去,2016年再后过头来看html5…

HTML5录音控件

最近的项目又需要用到录音,年前有过调研,再次翻出来使用,这里做一个记录. HTML5提供了录音支持,因此可以方便使用HTML5来录音,来实现录音.语音识别等功能,语音开发必备.但是ES标准提供的API并不人性化,不方便使用,并且不提供保存为wav的功能,开发起来费劲啊!! github寻找轮子,发现Recorder.js,基本上可以满足需求了,良好的封装,支持导出wav,但是存在: wav采样率不可调整 recorder创建麻烦,需要自己初始化getUserMedia 无实时数据回调,不方便绘制…

借助AMD来解决HTML5游戏开发中的痛点

借助AMD来解决HTML5游戏开发中的痛点游戏开发的痛点现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器的增量编译模式导致无法达到极致的编译效率,进而编码.运行.调试循环不流畅. 代码的组织方式是使用namespace,为了减少代码长度和提高代码输入的效率,一般使用import来创建别名,但是工具流不支持自动的import或者import检查.手动去写import降低了编码的效率. 使用namespa…

除非你是BAT,前端开发中最好少造轮子

站在前人的肩膀上 HTML.CSS.JavaScript是前端的根基,这是无可否认的事实.正如一辆车当然都是由一堆钢板和螺钉组成的,但是现在还有人拎着个锤子敲敲打打的造车吗?李书福说过,“汽车不过是四个轮子加两个沙发”,去一趟家具城和轮胎店,车不就造出来了吗?(好吧,我承认夸张系数有点大) 码农的世界里面经常会提到造轮子,也就是你为了造车而先拿扳手大锤去敲一个车轮出来,然后再用你做出来的车轮你做出来的座椅去组装成车.这种方式绝对的私人订制,但是这都是BAT干的事,其他团队和开发者这么干估计只能造…

html5录音支持pc和Android、ios部分浏览器，微信也是支持的，JavaScript getUserMedia

以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供实时音量反馈.有一个波形显示扩展支持.录音结果非常容易立即播放录音或者上传录音到服务器(提供参考源码). 2018-05-16首发,2019-04-21更新 GitHub地址:https://github.com/xiangyuecn/Recorder 在线测试demo传送门:https://xia…

基于html5的多图片上传，预览

基于html5的多图片上传本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/ 代码思路因为html5开放了multiple, 可以让用户一次上传多个文件.…

HTML5之坦克大战游戏开发

1.在使用arc方法进行画圆时,在IE9+,FF,Safari,Chrome等已经支持HTML5标准的浏览器中进行渲染时,采用逆时针方向画时,也就是说 arc(x, y, radius, startAngle, endAngle, counterclockwise) 中 counterclockwise值为true时,渲染存在问题. 解决方法:采用顺时针,即counterclockwise值为false 补充说明:在360安全浏览器中两种方法都可以. 2.移动坦克 <!Doctype html>…

HTML5物理游戏开发 - 越野山地自行车（三）粉碎自行车

自上一章公布到如今已时隔四月,实在对不住大家.让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了. 待到今日有空了,回头看了看自己曾经写的文章,猛得发现已经四个月不曾写文章了.便仅仅得叫声:"苦也~",我害怕本系列文章会拖得更久,于是立马提笔,也好为本系列文章留个凤尾. 首先,大家来温习一下前面两篇里的内容吧: HTML5物理游戏开发 - 越野山地自行车(二)创建一辆可操控的自行车 http://blog.csdn.net/yorhomwang/article/…

造轮子系列(三): 一个简单快速的html虚拟语法树(AST)解析器

前言虚拟语法树(Abstract Syntax Tree, AST)是解释器/编译器进行语法分析的基础, 也是众多前端编译工具的基础工具, 比如webpack, postcss, less等. 对于ECMAScript, 由于前端轮子众多, 人力过于充足, 早已经被人们玩腻了. 光是语法分析器就有uglify, acorn, bablyon, typescript, esprima等等若干种. 并且也有了AST的社区标准: ESTree. 这篇文章主要介绍如何去写一个AST解析器, 但是并不是…

HTML5摇一摇（上）—如何判断设备摇动

刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签"的小例子来谈一谈HTML5中如何调用手机重力感应的接口演示demo:"摇一摇,万福签" 什么是重力感应说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实…

HTML5中dialog元素尝鲜

对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的. 对话框的组成常见的弹出框形式: 位置:屏幕的左上角,右上角,左下角,右下角,垂直居中等大小:定宽定高,定宽不定高,不定宽不定高等开发中的对话框形式就是位置和大小随机组合的一种情况. 但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:tabl…

避免重复造轮子的UI自动化测试框架开发

一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览器的基本上底层都是selenium,驱动无线app和浏览器基本是appium.monkey之类的,底层都是基于官方支持的自动化测试框架开发而来,然后上层又做了各种封装首先在开始计划开发自动化时,第一步是了解目前已有的自动化开发技术,上面说了,最底层的就那几种,根据实际要去测试的业务需求选择合适的自…

使用HTML5开发Kinect体感游戏

一.简介我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决,吸引了大量玩家参与. 表面上看,这款游戏与其它体感体验无异,实际上,它一直运行于浏览器Chrome下,也就是说,我们只需要掌握前端相应技术,就可以开发基于Kinect的网页体感游戏. 二.实现原理实现思路是什么? 使用H5开发基于Kinect的体感游戏,其实工作原理很简单,由Kinect采集到玩家及环境…

读书笔记：《HTML5开发手册》--HTML5新的结构元素

读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在图书馆看到HTML5这类书基本就是略过,想想无非就是介绍一些标签,给一些初学者看,但看了本书之后深受启发,拿来分享,也希望大家多提意见. 一.HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: <!DOCTYPE HTML PUBLIC &…

【疯狂造轮子-iOS】JSON转Model系列之二

[疯狂造轮子-iOS]JSON转Model系列之二本文转载请注明出处 —— polobymulberry-博客园 1. 前言上一篇<[疯狂造轮子-iOS]JSON转Model系列之一>实现了一个简陋的JSON转Model的库,不过还存在很多问题.下面我会尝试一个个去解决. 2. 存在问题及解决思路 2.1 没有考虑JSON数据并不一定是NSDictionary类型有时候JSON并不一定是NSDictionary类型,可能是一个字符串,也可能是NSData类型的数据.不过不管是哪种类型,统…

【疯狂造轮子-iOS】JSON转Model系列之一

[疯狂造轮子-iOS]JSON转Model系列之一本文转载请注明出处 —— polobymulberry-博客园 1. 前言之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗忘.这段时间准备自己造一些轮子,主要目的还是为了提升自身实力,总不能一遇到问题就Google. 之前写i博客园客户端的时候,经常会遇到JSON数据转Model的功能.一般遇到这种问题我都是自己在对应Model类中定义一个+ (instance)initWithAttributes:(NSDictio…

HTML5 Boilerplate - 让页面有个好的开始

最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 Boilerplate是什么?解决了什么问题? 对于第一次听说这个人,肯定都有这个疑问把!在网上看了看,发现很多人都认为这个是和Bootstrap一样的东西,这真是大错特错了. 实际上,HTML5 Boilerplate只是一个单纯的HTML模版. 什么?HTML模版?干嘛用? 这里不得不提所有前端…

戏说HTML5

如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能... 这里感谢红枫一叶) 给浏览器暴露了许多新的接口... 加了很多新的效果... 问的人其实并不明白他想问的真正问题,回答的人貌似明白,但又好像少了点什么.牛逼的能力.新的接口.炫酷的效果,首先回答的人自己就是晕晕乎乎.什么是HTML.什么是CSS.什么是DOM.什么是JavaScript,大部分…

nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞

第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Windows程序员的事实). 操作系统 API.操作系统发展到今日,几乎桌面应用的所有功能,都是基于系统API构建的.调用API和语言及技术无关,哪怕是使用汇编.例如(代码来源于网络,本地重新编译): ;我的第一个win32汇编程序 ;一个经典的hello world !程序 ;>>>>&…

Web大前端时代之：HTML5+CSS3入门系列

准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTDotNet/ 思维导图(不断更新): 图片:http://dnt.dkill.net/DNT/HTML5/index.jpg 源码:http://dnt.dkill.net/DNT/HTML5/h5.zip 在线文档:http://dnt.dkill.net/DNT/HTML5 00.Web大前端时…

【HTML5之转动的轮子】的更多相关文章