以图明志

HTML

用HTML5 Canvas做一个画图板

一个简单的Canvas应用
功能很简单,原理其实和拖放是类似的,主要是三个事件:在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔) 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画) 在document 上绑定mouseup 事件以标志绘画的结束(解绑document 上的两个事件)

HTML

用HTML5 canvas写一个时钟

图片指针用ctx的drawImage可以实现
HTML5足够强大实现很多功能,画一个时钟只是一个小玩意。图片指针用ctx的drawImage可以实现。至于兼容性问题,网上的解决方案已经很多了。这个东东是用来玩的,不是用来做应用的,学习下canvas API。

Web设计理念

2012情人节献礼:1kb的玫瑰生成脚本

纯js脚本实现
情人节快到了,这里送大家一枝玫瑰,无论是有对象还是没对象的朋友们,情人节快乐~下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在Firefox下也会稍卡。

HTML

HTML5用canvas绘制五星红旗

学习canvas的一个小实例
作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。

HTML

圣诞了,送大家一颗HTML5圣诞树

HTML5 Canvas圣诞树
又逢圣诞了,为了让小站NowaMagic有点节日气氛,这里也弄一棵圣诞树放放~大家可以先看下效果。由于用到canvas以及一些复杂的运算,建议使用Chrome浏览器观看,最为流畅,其次是Opera(已经开始有点卡了),Firefox差不多是逐帧播放了,Safari貌似有bug,除非用鼠标不断点击,不然几乎不会动了。用IE的话请自重。

HTML

HTML5 canvas流体力学效果

这个世界牛人实在太多了
某人用Java搞了一个流体力学的演示:http://grantkot.com/MPM/Liquid.html。 HTML 5版的流体力学演示(推荐使用Chrome浏览器浏览)不过,这仅仅是个开始。某同学将其发布上了reddit.com,于是,全世界的同学们开始给力了。

Web设计理念

用Canvas做一个Doodle吉它

这个吉它效果是使用HTML5 Canvas编写的
这个吉它效果是使用HTML5 Canvas编写的,如果你的浏览器不支持HTML5,那么就看不到这个演示效果了。主要以简要为主,所以可能看起来会比较简陋,没有原版的写的这么有深度,不过保证是你能看的懂的代码。仿的不是很好,主要原因在于琴弦的张度和弹性的函数变化,网上搜索了下公式,可能是欠阻尼方程。但基本功能还是有了。
1 / 1 首页 < Prev 1 Next > 尾页 页码: