随笔分类 -  html5

CSS3Drop Shadow
摘要：<div class="demo"> <div class="box box1"><p>Box1</p></div> <div class="box box2"><p>Box2</p></div> <div class="box box3"><p>Box3</p></div> <div class="box box4"><p 阅读全文

posted @ 2012-09-13 10:23 djy_fn 阅读(168) 评论(0) 推荐(0)

在HTML5的Canvas上绘制椭圆的几种方法
摘要：概述 html5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同：context为Canvas的2D绘图环境对象，x为椭圆中心横坐标，y为椭圆中心纵坐标，a为椭圆横半轴长，b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆//-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、//纵半轴长度，不可同时为0//该方法的缺点是，当linWidth较宽，椭圆较扁时//椭圆内部长轴端较为尖锐，不平滑，效率较低function Pa 阅读全文

posted @ 2012-09-05 15:15 djy_fn 阅读(366) 评论(0) 推荐(0)

jqueryMoble demo
摘要：日历<!DOCTYPE html><html><head> <title>Page Title</title> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/jquery.mobile-1.1.1.min.css" rel="stylesheet&quo 阅读全文

posted @ 2012-07-30 13:24 djy_fn 阅读(435) 评论(0) 推荐(0)

HTML 5游戏：EaselJS创建Canvas动画
摘要：When you want to write casual games using the HTML5 Canvas element, you’ll need to find a way to handle your sprites. There are several libraries available to help you writing games such asImpactJS,CraftyJSand so on. On my side, I’ve decided to useEaselJSwhich has been used to writePiratesLoveDaisie 阅读全文

posted @ 2012-06-13 16:28 djy_fn 阅读(1322) 评论(0) 推荐(0)

EaselJS-3D
摘要：本人html5初学者，正处于学习阶段，看到比较好的例子，总是亲手自己试试，慢慢学习。最近看到叶落为重生帖子rotate 3D [初识篇]学到学到了一些知识，如何做3D旋转。本文中利用EaselJS做个一样效果。demo1下面就以一个小球来展现改变z坐标的位置对其2d界面下的x，y位置和大小的影响。 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style> 5 html {overflow:hidden} 6 阅读全文

posted @ 2012-06-13 14:13 djy_fn 阅读(794) 评论(0) 推荐(0)

HTML5 Gaming: building the core objects & handling collisions with EaselJS
摘要：We’ve seen in the previous article how to animate our sprites using EaselJS:HTML5 Gaming: animating sprites in Canvas with EaselJSWe’re now going to see how to create some of our game objects like ennemies and our platformer hero. We will also see how to implement a simple collision mechanism betwee 阅读全文

posted @ 2012-05-25 17:17 djy_fn 阅读(398) 评论(0) 推荐(0)

手把手教你入门EaselJS做HTML5动画[转载]
摘要：今天借由EaselJS这个脚本库，写一个简单的动画给大家当做为示范。DEMO演示链接这个demo的最终效果是游戏割绳子(Cut the Rope)中的小青蛙的动画表情。首先简单介绍一下EaselJS这个脚本库，它是我最近发现的一个用来绘制Canvas动画的脚本库，比起Canvas的底层API，这个脚本库的接口设计更简单易用，所以做起动画来就易如反掌了。这里有详细的信息和文档素材我们今天要完成的动画是通过Canvas技术，一帧一帧绘制出来的，那么首先需要每一帧动画的素材。我们从http://cuttherope.ie/找到了一些素材，并把每一帧动画都切割成100*100像素的图像。这里我们选择了 阅读全文

posted @ 2012-05-24 08:18 djy_fn 阅读(6106) 评论(3) 推荐(0)

无意中发现免费的html5模版
摘要：这个地址需要登录后才可以进入http://www.wix.com/upgrade/info-my-account这里列出里面的几个例子，如果看不了建议登录后查看http://www.wix.com/create/website/html/all/web/1http://www.wix.com/html-templates/html/web/the-bakery_orlyhttp://www.wix.com/html-templates/html/web/model-agency可以编辑然后发布我的例子http://www.wix.com/djy252/demo 阅读全文

posted @ 2012-05-23 14:46 djy_fn 阅读(285) 评论(0) 推荐(0)

导航