李清昌 - 博客园

2015年5月

摘要：最近学东西学的有点太散了，歇一阵子，重新完善之前的JQ插件，今天先上拖拽吧// JavaScript Document(function($){ var defaults = { actionElement : "", //获得事件的元素，非必填项 rang... 阅读全文

posted @ 2015-05-18 16:56 李清昌阅读(207) 评论(0) 推荐(0) 编辑

canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用

摘要： canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2);四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始,需要使用ctx.moveTo(x,y)方法演示效果如下图上代码:html无标题文档JS代码dot.js... 阅读全文

posted @ 2015-05-06 23:59 李清昌阅读(1156) 评论(1) 推荐(1) 编辑

requestAnimationFrame与setInterval,setTimeout

摘要：自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后,,突然想去看看如果这里改回setInterval,会是个什么样,差距究竟有多大?结果....一看吓一跳,差距太大了,说... 阅读全文

posted @ 2015-05-04 23:46 李清昌阅读(1744) 评论(0) 推荐(0) 编辑

2015年4月

javascript中矩形的碰撞检测---- 计算碰撞部分的面积

摘要：今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积.这应该不是最合适的办法,具体怎样更合适,后续发现了再补上吧.先说从妙味课堂里听到的九宫格判断碰撞检测的方法如图,左侧的... 阅读全文

posted @ 2015-04-28 23:25 李清昌阅读(2421) 评论(0) 推荐(0) 编辑

canvas中的rotate的使用方法

摘要：今天在绘制一个足球滚动的时候,想使用rotate方法,之前看到这个方法的时候,并没有引起任何重视,无非就是和CSS3里的rotate一样的用么...遗憾的是,事实并非如此,由于代码在公司,我也就不去找那些图片资源了,直接用一个黑色方块代替代码如下:var oCan = document.getEle... 阅读全文

posted @ 2015-04-17 00:13 李清昌阅读(5833) 评论(0) 推荐(0) 编辑

利用css3制作的几个loading图

摘要：先看图，多数是从别人那里看的效果直接仿的，先开随笔，有了创意继续加其实3个之后，脑子里立刻有个第四个的制作思路，无外乎是利用border或者块元素变形，然后构思好接下来的行为，写起来也非常简单，5个一共用了半个小时左右，缺的还是思路啊代码如下仅在chrome下正常显示 ... 阅读全文

posted @ 2015-04-15 13:53 李清昌阅读(346) 评论(1) 推荐(1) 编辑

Canvas小游戏里，删除过期或者死亡元素技巧

摘要：在许多canvas游戏，canvas效果中，经常会有过期的元素需要删除例如现在需要制作一个笨鸟先飞（flappy bird）小游戏，游戏中障碍物(且称为柱子),此时会有一个全局变量保存所有柱子的实例，在逐帧播放的时候循环绘制。当柱子移动到canvas的左边且消失的时候，这个柱子实例就可以删除了。阅读全文

posted @ 2015-04-13 17:05 李清昌阅读(349) 评论(0) 推荐(0) 编辑

Canvas里绘制矩阵文字

摘要：效果如下实现方法：[ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1... 阅读全文

posted @ 2015-04-13 16:56 李清昌阅读(266) 评论(0) 推荐(0) 编辑

前端开发与SEO

摘要：前端开发中通过一些小习惯，可以有利于SEO，本着蚊子再小也是肉的原则，能抓住自然不能忽略。1.控制首页链接数量，不能过多，也不要太少。更不要为了凑数而添加2.扁平化层次，力争跳转三次可以到任何页面3.导航，面包屑导航，分页。导航里一定要有文字描述，尽量不要使用 | 等无意义的字符。分页最好是用 ... 阅读全文

posted @ 2015-04-03 15:09 李清昌阅读(236) 评论(0) 推荐(0) 编辑

2015年2月

背景图片随窗口大小改变自适应

摘要：效果参考http://vip.163.com/http://vip.sina.com.cn/特点：背景图片在不变形的情况下尽可能的显示完整，窗口不出现滚动条，始终全屏显示JS：#content代表最外层的DIV，使页面全屏.bg代表背景图片 //此参数表示图片缩放的比例，如果有需要定位在窗口某位置的... 阅读全文

posted @ 2015-02-11 16:54 李清昌阅读(4642) 评论(1) 推荐(1) 编辑