2015.4.23 贪吃蛇、canvas动画,各种上传工具,url信息匹配以及最全前端面试题等

1、面向对象贪吃蛇

2、css中:hover 改变图片 页面加载完 第一次鼠标移入会闪一下 这是为啥?

解决方法:你把两张图合成一张图或者是先把图片加载到页面上,然后再hover出来。
解析:图片改变了,不管网速快慢它都有个加载时间。

3、好的canvas动画工具 或者游戏的推荐:

解决方法工具推荐-1&工具推荐-2

4、下面代码为什么在Chrome下会报错?

var log = console.log;
log("test");

解决方法:改为以下代码

log = console.log.bind(console);
log("test");

解析:收藏console.log()如何缩写为log()

5、http://127.0.0.1/home.php?mod=space&do=wisdomtree怎么解析这个url里面是否有某个词语,例如wisdomtree

解决方法

//获取URL中name参数的传递信息
function getQueryString(name){
var reg =newRegExp("(^|&)"+ name +"=([^&]*)(&|$)","i");
var reg =new location.search.substr(1).match(reg);
if(r !=null)return unescape(decodeURL(r[2]));
returnnull;
}

6、头像上传和裁切该怎么实现呢?

解决方法cropper
:附:百度上传组件\拖拽上传\Jquery上传\flash 头像上传\动画插件tweenmax

7、最全前端面试问题及答案总结

时间: 2024-12-18 01:55:34

2015.4.23 贪吃蛇、canvas动画,各种上传工具,url信息匹配以及最全前端面试题等的相关文章

megapix-image插件 使用Canvas压缩图片上传

<!DOCTYPE html > <html> <head> <title>通过Canvas及File API缩放并上传图片</title> <script src="/Scripts/Jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="/Scripts/MegaPixIm

html5 canvas头像裁剪上传

效果: 在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传,这里拥护html5,用canvas实现下.前两次的右键是为了说明不是用flash做的. 如果想要更严谨的,有技术支持的这个东西的话,可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html. 原理很简单:裁剪框是用html做的,canvas的作用在于每次移动,变形后根据裁剪框的位置坐标以及大小,绘制图像的部分并缩放,还有绘制裁剪框区域外的灰色区域

Canvas处理头像上传

未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到这些问题,最后我们选用Canvas来完成图像尺寸缩放和图片数据获取. 等边处理 头像一般都是正方形,首先我们需要获取图片宽度和高度的最小值,用该最小值作为边长居中裁剪图片,最终得到一个正方形的图片: var ImageEditor = function() { // 用离线canvas处理图片数据

megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用flash实现上传的): 经过研究找到了一个手机端比较相对比较好用的插件实现图片上传,那就是megapix-image插件,比uploadify还是好用多了,下面就来上实例吧: html页面: <html> <body> <input type="file" cap

canvas利用formdata上传到服务器

1.首先绘制canvas图片 <canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;border-radius:50%"> 您的浏览器不支持 HTML5 canvas 标签. </canvas> 这里canvas绘图就不是本文章讲解的内容,我们简单的在画布上写两个字: var canvas = doc

贪吃蛇“大作战”(二)

从对象出发看贪吃蛇 在上一篇博客中,我通过逐行分析代码对贪吃蛇的运行机制做了一个简要的介绍:逐行分析后可以看出这个贪吃蛇例程的编写范式更突出面向过程:该例程先是预设食物和贪吃蛇的位置参数,然后通过选择逻辑判断外部命令的值,根据不同的值做出不同的动作,最后在地图上将之前的动作"渲染",达到贪吃蛇"前进"的效果:如此下来,一步一步地根据"看得到的逻辑"实现了贪吃蛇的运行机制. 现在,我从面向对象的编程思维来对这个贪吃蛇运行机制做一个分析.从下面这幅图

Canvas贪吃蛇大作战斗实现及思考

一向比较后知后觉,上周才发现了贪吃蛇大作战这个游戏,玩了一下,居然很上瘾!应该讲是一种虐的快感和不小心死掉的遗憾和再来一盘的心态的集合! 只是当时有个思考,就是游戏如何在我切换到其他应用后依然回来可以继续对战!是将我的数据及时保存,然后从这个游戏房间把我先挂起来,然后其他的玩家就会看到我突然在这里消失了?那么再将我恢复的时候如何保障不与其他用户冲突! 同时我发现每次进来,旁边的蛇依然在原来的位置,而且一样的会躲闪我的攻击等,我想那其他玩家的历史数据是怎么做到能判断我当前切换进来的行为!当时我还思

超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 <canvas> 元素. 贴士:全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special 尤雨溪个人主页炫彩三角纽带效果,点击还可变换 GitHub源码 . Demo演示 知乎登录注册页动态离子背景效果 GitHub源码 . Demo演

贪吃蛇大作战canvas实现(手机触屏操作)--地图逻辑

//html部分 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>贪吃蛇大作战</titl