令人震撼的表白,你hold住吗？

为什么程序员单身的多呢？因为面向对象的编程中，经常会遇到一个错误：找不到对象。

本文也属于单身程序员的福音范畴，让单身程序员勇敢示爱·····，但是老天保佑你的示爱对象不要用IE678~~

本文动画效果全部基于Jscex，然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解，本篇先饱饱眼福。

 

二.作品一：心碎

<style type="text/css">input.css3btn { filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#000099CC', EndColorStr='#FF0087B4'); border-top: 1px solid rgba(56, 83, 140, 1); border-right: 1px solid rgba(31, 45, 77, 1); border-bottom: 1px solid rgba(21, 30, 51, 1); border-left: 1px solid rgba(31, 45, 77, 1); border-radius: 4px; box-shadow: inset 0 1px 10px 1px rgba(92, 139, 238, 1), 0 1px rgba(29, 44, 77, 1), 0 2px rgba(31, 48, 83, 1), 0 4px 4px 1px rgba(17, 17, 17, 1); color: rgba(240, 240, 240, 1); font: bold 20px "helvetica neue", helvetica, arial, sans-serif; padding: 10px 0; text-align: center; text-shadow: 0 -1px 1px rgba(30, 45, 77, 1); width: 150px; background-clip: padding-box } input.css3btn:hover { box-shadow: inset 0 0 20px 1px rgba(135, 173, 255, 1), 0 1px rgba(29, 44, 77, 1), 0 3px rgba(31, 48, 83, 1), 0 4px 4px 1px rgba(17, 17, 17, 1); cursor: pointer } input.css3btn:active { box-shadow: inset 0 1px 10px 1px rgba(92, 139, 238, 1), 0 1px rgba(29, 44, 77, 1), 0 2px rgba(31, 48, 83, 1), 0 4px 3px rgba(17, 17, 17, 1); margin-top: 1px }</style> <br><input border: solid gray your browser does not support the canvas element. type="text/javascript" var cxt='canvas.getContext("2d");' cxt.fillstyle="#030303" cxt.fillrect canvas.width canvas.height img="new" image img.src="http://images.cnblogs.com/likecs_com/iamzhanglei/p1.png" img.onload="function" cxt.drawimage cyc="10;" a="20;" balls="[];" ball="{" x: y: r: vx: vy: balls.push fireasync='eval(Jscex.compile("async",' function while cxt.globalalpha="1;" for in cxt.beginpath cxt.arc math.pi true cxt.closepath cxt.fill if else getrandomnumber max return math.floor min vector2="function" y this.x="x" this.y="y" ball2s="[];" i="0;" ball2="{" position: new ball2s.push t="0;" heartr="100;" moveasync='eval(Jscex.compile("async",' try cxt.clearrect break ball2s.length="0;" x result="((x" catch alert qasync='eval(Jscex.compile("async",' balls.length="0;"><br><input border: solid gray your browser does not support the canvas element. src="https://files.cnblogs.com/iamzhanglei/CanvasText-0.4.1.js" type="text/javascript" definition of global vars var cxt='canvas.getContext("2d");' creation new canvastext instance. ct="new" function initcanvastext dtime="0;" drawasync='eval(Jscex.compile("async",' while once window is loaded we set configuration and default styles. ct.config canvas: context: fontfamily: fontsize: fontcolor: roman fontweight: fontstyle: text want to draw. texti="I" draw it ct.drawtext text: x: y: boxwidth: textu="U" if break cxt.fillstyle="#030303" cxt.fillrect canvas.width canvas.height img="new" image img.src="http://images.cnblogs.com/likecs_com/iamzhanglei/p1.png" img.onload="function" cxt.drawimage cyc="10;" a="20;" balls="[];" ball="{" r: vx: vy: balls.push fireasync='eval(Jscex.compile("async",' cxt.globalalpha="1;" for in cxt.beginpath cxt.arc math.pi true cxt.closepath cxt.fill else getrandomnumber max return math.floor min randomcolor arrhex='["0",' strhex="#" index i="0;" vector2="function" y this.x="x" this.y="y" ball2s="[];" ball2="{" position: color: ball2s.push t="0;" moveasync='eval(Jscex.compile("async",' try cxt.clearrect ball2s.length="0;" catch alert heartr="110;" f2time="0;" fireasync2='eval(Jscex.compile("async",' x="ball2s[i].position.x" result="((x" qasync='eval(Jscex.compile("async",' balls.length="0;"><br><input>

 

四.同步更新

本文已同步更新至：

HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html