代码人生的小狗窝

一行行枯燥的代码,却描绘出人生的点点滴滴

推荐文章

Html5 搬动端 触摸滑动事件

    Html5 移动端 触摸滑动事件以下代码经过测试  没有问题 且可以循环滑动     <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content-Type" conte

    阅读全文>>

作者:coody分类:【_HTML5浏览(1969

2018-10-17

HTML5 Canvas:初步Canvas

    HTML5 Canvas:初始CanvasCanvas ,HTML 5中引入它,可以做很多事情:画图、动画、游戏开发等等。   Canvas 元素 Canvas 中文翻译为:画布。   <canvas id=”yourCanvasId” width=”300” height=”150” /> Canvas元素除了公用属性外,只有两个额外的属性:width, height,他们都是没有单位的,其实单位是px,但是不能写单位。如果不指定这两个属性,默认是width为300,height为150。 众所周知,html元素的样式,都可以用css样式来指定。Canvas也不例外。 <html> <head> <t

    阅读全文>>

作者:coody分类:【_HTML5浏览(1934

2018-10-16

依据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

    根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局 在数学中,矩阵是以行和列排列的数字,符号或表达式的矩形阵列,任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换,即f(x)= 4 x等线性函数的推广。例如,旋转的载体在三维空间是一个线性变换,这可以通过一个表示旋转矩阵 [R :如果v是一个列向量描述(只有一列的矩阵)的位置在空间中的点,该产品器Rv是列矢量描述旋转后该点的位置。两个变换矩阵的乘积是表示两个变换组成的矩阵。矩阵的另一个应用是线性方程组的解。如果矩阵是方形的,可以通过计算其行列式来推断它的一些性质。例如,当且仅当其行列式不为零时,方阵具有相反的 。从矩阵的特征值和特征向量中可以看到线性变换的几何结构(以及其他信息)。 矩阵的应用可以在大多数科学领域找到。在物理学的每一个分支,包括经典力学,光学,电磁学,量子力学和量子电动力学,都被用

    阅读全文>>

作者:coody分类:【_HTML5浏览(2012

2018-10-17

基于HTML5 Canvas的CSG结构实体几何书架

    基于HTML5 Canvas的CSG构造实体几何书架 CSG 构造实体几何这个概念在工业水利水电施工上、游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体、圆柱体、棱柱、棱锥、球体、圆锥等。根据每个软件包的不同这些体元也有所不同,在一些软件包中可以使用弯曲的物体进行 CSG 处理,在另外一些软件包中则不支持这些功能。构造物体就是将体元根据集合论的布尔逻辑组合在一起,这些运算包括:并集、交集以及补集。我们一般可以用 CSG 来将简单的模型合在一起生成复杂的模型,这样在构造模型的时候会省很多力。 HT 中的 ht.CSGNode 图元类型就是参考 CSG 封装的一个函数,ht.CSGNode 继承于 ht.Node,当 style 的 shape3d 属性为空时显示为六面体效果,CSGNode如果通过 setHost 吸附到 宿主 CSGNode 或 

    阅读全文>>

作者:coody分类:【_HTML5浏览(1153

2018-10-17

基于HTML5及WebGL开发的2D3D第一人称遨游进行碰撞检测

    基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测 为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用“第一人称”来操作前进后退上下左右,并且实现了碰撞检测。 先来看下实现的效果: http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision 或者http://v.youku.com/v_show/id_XMzA5MzUzODc4NA==.html?spm=a2h3j.8428770.3416059.1视频中出现的帧的问题是我屏幕录制器的问题,真正操作的时候不会有,建议用上面的链接自己操作玩玩,鼠标或者触屏都可以,不过我觉得最方便的还是操作键盘wsad控制上下左右。 我的想法是先把场景布局好,代码如下: createHT([100,

    阅读全文>>

作者:coody分类:【_HTML5浏览(1372

2018-10-17

[js好手之路] html5 canvas教程

    [js高手之路] html5 canvas教程七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可。 1 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script> 9 window.onload = function () { 10 var oCanvas = document.querySelector("#canvas"), 1

    阅读全文>>

作者:coody分类:【_HTML5浏览(1518

2018-10-17

[js好手之路] html5新增的定时器requestAnimationFrame实战进度条

    [js高手之路] html5新增的定时器requestAnimationFrame实战进度条 在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题? 优势与特点: 1)requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率 2)在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量 3)requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CP

    阅读全文>>

作者:coody分类:【_HTML5浏览(1168

2018-10-17

HTML5本地存储应用sessionStorage跟localStorage

    HTML5本地存储应用sessionStorage和localStorage在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定.  html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数据存储,这两者有什么特点呢? sessionStorage   sessionStorage属于临时会话,数据存储的有效期为:从页面打开到页面关闭的时间段,属于窗口的临时存储,页面关闭,本地存储消失 localStorage 永久存储(可以手动删除数据) 存储量限制 ( 5M ) 客户端完成,不会请求服务器处理 sessionStorage数据在页面之间不能共享、 而localStorage可以实现页面之间共享 sessionStorage的应用: 1 <!DOC

    阅读全文>>

作者:coody分类:【_HTML5浏览(1509

2018-10-16

Android + HTML5 混同开发

    Android + HTML5 混合开发摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正 简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一个轻量级的浏览器(WebView),一部分原生的功能改为 HTML5 来开发,这部分功能不仅能够在不升级 App 的情况下动态更新,而且可以在 Android 或 iOS 的 App 上同时运行,让用户的体验更好又可以节省开发的资源。 ##成品 APP: 超星慕课(一款包含 Java 和 C# 学习的视频软件) 列车时刻表查询(一款根据国家列车时刻表的查询火车车次信息的查询软件) 便捷天气预报查询(一款由聚合数据提供 Json 数据的中国城市天气预报查询系统) 豆豆新闻(一款由于谷歌新闻提供 API 结合新浪新闻提供 Json 数

    阅读全文>>

作者:coody分类:【_HTML5浏览(2131

2018-10-16

[js好手之路]html5 canvas动画教程

    [js高手之路]html5 canvas动画教程备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的时候,保持位置不变,把速度变成相反的方向 1 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script src="./ball.js"></script> 9 <script> 10

    阅读全文>>

作者:coody分类:【_HTML5浏览(1121

2018-10-17

[js好手之路] html5 canvas动画教程

    [js高手之路] html5 canvas动画教程匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的。 1 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script> 9 window.onload = function () { 10 var oCanvas = document.query

    阅读全文>>

作者:coody分类:【_HTML5浏览(534

2018-10-17

解决html5 canvas 绘制字体、图片与图形模糊有关问题

    解决html5 canvas 绘制字体、图片与图形模糊问题html5 canvas 绘制字体、图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑。当然很多高端台式电脑也有高分辨率高dpi的显示器。   canvas在浏览器中的缩放原理 如果没有设置style那么就以html的属性width,height作为尺寸。 如果设置了style中的width、height,那么以其style设置为最终绘制到浏览器的尺寸。 也就是说,属性中的宽高并不代表实际宽高,所以高dpi下会放大canvas,导致模糊。 canvas的width、height属性是canvas的后缓冲尺寸,绘制到浏览器后会根据当前dpi进行缩放。 devicePixelRatio(window成员)保存了在高dpi状态下属性width/height被放大的比例。 &nbs

    阅读全文>>

作者:coody分类:【_HTML5浏览(1884

2018-10-17

HTML5的发展进程

    HTML5的发展历程 标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1

    阅读全文>>

作者:coody分类:【_HTML5浏览(1393

2018-10-15
上一页 1/58页 下一页