canvas+js绘制见缝插针

 

关于移动端meta设置

  1. <head>
  2.     <meta charset=“UTF-8”>
  3.     <meta name=“renderer” content=“webkit”>
  4.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0”>
  5.     <!– 启用webAPP全屏模式–>
  6.     <meta name=“apple-mobile-web-app-capable” content=“yes”>
  7.     <!– 隐藏状态栏或者设置状态栏的颜色–>
  8.     <meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
  9.     <!– 忽略数字自动识别为电话号码–>
  10.     <meta name=“format-detection” content=“telephone=no”>
  11.     <!–控制缓存的失效日期 –>
  12.     <meta http-equiv=“Expires” content=“-1”>
  13.     <!– 禁止转码–>
  14.     <meta http-equiv=“Cache-Control” content=“no-cache”>
  15.     <!– 禁止缓存访问页面–>
  16.     <meta http-equiv=“Pragma” content=“no-cache”>
  17.     <meta name=“applicable-device” content=“mobile”>
  18.     <!– 页面关键词–>
  19.     <meta content=“” name=“keywords”>
  20.     <meta name=“description” content=“”>
  21.     <base target=“_blank”>
  22.     <title></title>
  23. </head>

目前使用良好,有需要补充的欢迎下面猛戳。。。

 

HTML5/CSS3简易版俄罗斯方块游戏

很久没有发布关于HTML5游戏方面的演示示例了,今天要分享一款HTML5俄罗斯方块游戏,这款俄罗斯方块游戏比较简易,并没有华丽的外观,但是实现了俄罗斯方块的移动、翻转、消除等基本的功能,这对我们学习CSS3、HTML5和Javascript将会有很大的帮助。832

[url href=http://150643.com/avg/eluosi/index.html]在线演示[/url]

HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷

这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的。另外,动画使用了一张立体感很强的天空背景图,让蝴蝶飞舞时更加显得立体逼真。

76675

[url href=http://150643.com/avg/hudie/index.html]在线演示[/url]

HTML5/CSS3可折叠的3D立方体动画

最近我们已经为大家分享过很多基于HTML5和CSS3的立方体动画,比如HTML5多立方体3D翻转动画和HTML5 3D立方体图片切换动画,效果都非常惊人。今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真。be

[url href=http://150643.com/avg/lifang/index.html]在线演示[/url]

HTML5 Canvas粒子模拟效果

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。fdsf

[url href=http://150643.com/avg/lizi/index.html]在线演示[/url]

HTML5中国象棋游戏 自定义象棋难度

棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式。程序写累了,喝上一杯咖啡,和电脑对弈几把吧,相信这HTML5中国象棋游戏的实现算法你比较清楚,可以打开源码来研究一下这款HTML5中国象棋游戏。html5-zgxq

[url href=http://150643.com/avg/xiangqi/index.html]效果演示[/url]

HTML5雨滴滑落动画及天气预报代码

今天我们要来分享一款相当逼真的HTML5 Canvas雨滴下落动画,该动画模拟雨滴附在窗户上缓缓滑落的效果,同时窗户也因为雨滴而变得模糊,窗外的夜景便显得格外迷人。利用HTML5技术,该雨滴下落动画一共有5种不同的效果。由于Chrome的跨域限制,本地将无法运行,你可以在本站的在线演示中看到效果,或者将源代码上传至自己的服务器后浏览。

fdsfds[url href=http://150643.com/avg/tqxg/index.html]效果演示[/url]

HTML5 Canvas雨滴下落动画 超逼真

今天我们要来分享一款相当逼真的HTML5 Canvas雨滴下落动画,该动画模拟雨滴附在窗户上缓缓滑落的效果,同时窗户也因为雨滴而变得模糊,窗外的夜景便显得格外迷人。利用HTML5技术,该雨滴下落动画一共有5种不同的效果。由于Chrome的跨域限制,本地将无法运行,你可以在本站的在线演示中看到效果,或者将源代码上传至自己的服务器后浏览。780

[url href=http://150643.com/avg/tianqi/index.html]在线演示[/url]

超炫酷的HTML5视频播放器 支持手机移动页面

之前我们介绍过不少基于HTML5的视频播放器和音频播放器,有些都非常有个性,比如这款HTML5卡带式古典播放器和超酷播放器UI界面的HTML5视频播放器。今天要分享的这款也是HTML5视频播放器,但它的特点是支持手机移动页面,播放器的尺寸可以自适应各种设备。

QQ截图20160610192357

[url href=http://150643.com/avg/html5video/index.html]在线演示[/url]