在讲述绘制星星动画之前,先介绍一点javascript知识。
面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单、代码量少的程序,因为脚本过于复杂会直接导致浏览器出现异常。 但是javascript还是具有面向对象的特点的。对于多过程、多对象的脚本程序还是建议构建对象,这样对于脚本的维护、修改和调用都是很方便的。javascript构造对象很简单,比起java、c++简单很多, 例如构建一辆汽车的对象:
<pre name="code" class="javascript"><span style="font-size:18px;">var car=function()//构建车的对象
{ this.color="red";
this.price=100000;
this.length=2.5;
this.speed=80; //车的一些属性
this.x=0;
this.updatepos=function() //更新车位置的方法
{ this.x+=this.speed;
}
}
</span></pre><span style="font-size:18px"><br>
<br>
</span>
<pre></pre>
<span style="color:#330033"><span style="font-size:18px">构建好对象之后就可以构建对象了,
var mycar=new car();</span></span>
<p></p>
<p><span style="font-family:monospace">
<span style="white-space:pre"><span style="color:#330033">
<span style="font-size:18px">setinterval():这是javascript中的定时器函数,有两个参数,前面是待执行的代码,
后面一个是间隔时间。但是有几点需要注意的问题。</span>
</span>
</span>
</span>
</p>
<p><span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">1:假设有一个函数getpos()需要用定时器执行,
可以setinterval(getpos,1000)或者setinterval("getpos()",1000)
如果写成setinterval(getpos,1000)一般只会执行一次这个函数,我曾经犯过这个错误。</span>
</span>
</span>
</span>
</p>
<p>
<span style="font-family:monospace"><span style="white-space:pre">
<span style="color:#330033"><span style="font-size:18px">
2:在setinterval()中尽量使用全局变量,因为它重复调用,局部变量容易出错。
</span>
</span>
</span>
</span>
</p>
<p><span style="font-family:monospace">
<span style="white-space:pre">
<span style="font-size:18px">
<span style="color:#330033">
</span>
</span>
</span>
</span>
</p>
<p>
<span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">
<img src="http://hi.csdn.net/attachment/201202/21/0_1329819126ax31.gif" align="middle" alt="">
</span>
</span>
</span>
</span>
</p>
<p>
<span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">好了,罗嗦了一会儿,我想大家应该都知道这些的。</span>
</span></span></span></p>
<p><span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">这个gif图片中包括了星星对象和文字(后面讲述)对象。
对于绘制星星,应该充分利用五角星的对称性。
在<a href="http://lib.csdn.net/base/html5"
class="replace_word" title="html5知识库" target="_blank" style="color:#df3434;
font-weight:bold;">html5</a>
canvas对象中,大家最好要灵活使用坐标变换,我把主要的坐标变换函数说一下:
</span>
</span>
</span>
</span
</p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px"><span style="color:#330033"></span></span></span></span></p>
<pre name="code" class="javascript"><span style="color:#ff0000;">
<span style="font-size:18px;">save() //保存当前画布状态
restore()回复画布状态
translate(x,y) //将画布中心坐标平移至x,y
rotate(angle) //将画布旋转angle角度
transform 和settransform是对画布矩形进行变换的,比较难用</span></span></pre>
<span style="font-size:18px"> 现在构建星星对象,星星在天空中需要哪些属性呢?
一般有坐标、亮度、大小、倾斜角度等,我定义的如下</span>
<p></p>
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre"></span></span></span></p>
<pre name="code" class="javascript"><span style="font-size:18px;"> this.x = -1;
this.y = -1; //表示横纵坐标
this.style = "";
this.r = -1;
this.scale = 1; //表示缩放倍数
this.angle = 0; //旋转的角度
this.angle1 = 0; //辅助参数</span>
</pre>
<span style="font-size:18px"><br>
其次需要绘制星星的方法,前面说过需要利用星星的对称性,因此实际上只需要绘制五分之一,
再利用旋转就可以绘制全部的图形了。星星需要填充颜色,html5中可以对路径进行填充,
因此可以使用路径beginpath()和closepath(),但是最后记住使用fill()函数填充的。</span>
<p></p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">例如我绘制五分之一图形函数:</span>
</span>
</span></p>
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre"></span></span></span></p>
<pre name="code" class="javascript">
<span style="font-size:18px;"> this.drawpartstar = function () //部分
{
cxt.save();
cxt.beginpath();
cxt.linecap = "round"; cxt.linewidth = 5;
cxt.fillstyle = this.style;
cxt.translate(this.x, this.y); //位移
cxt.rotate(this.angle1);
//cxt.globalalpha = this.alpha; //设置透明度
cxt.moveto(0, 0);
var xx = 0 - this.r * math.sin(36 / 180 * 3.14);
var yy = 0 - this.r * math.cos(36 / 180 * 3.14);
cxt.lineto(xx, yy);
xx = 0;
yy = 0 - this.r * math.cos(36 / 180 * 3.14)
- this.r * math.sin(36 / 180 * 3.14) * math.tan(72 / 180 * 3.14);
cxt.lineto(xx, yy);
xx = this.r * math.sin(36 / 180 * 3.14);
yy = 0 - this.r * math.cos(36 / 180 * 3.14);
cxt.lineto(xx, yy);
cxt.lineto(0, 0);
cxt.closepath();
cxt.fill();
cxt.restore();
}</span></pre><span style="font-size:18px"><br>
然后利用画布旋转就可以得到整个的图形了</span>
<p></p>
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre">
</span></span></span></p>
<pre name="code" class="javascript">
<span style="font-size:18px;">this.drawstar = function () //绘制完整的花
{
for (var i = 0; i <= 4; i++) {
this.angle1 = i * 72 / 180 * 3.14 + this.angle;
this.drawpartstar();
}
}</span></pre><span style="font-size:18px"><br>
关于星星的坐标,半径大小,倾斜角度都可以使用随机函数实现,利用实现m到n之间的随机数:</span>
<p></p>
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre"></span></span>
</span></p>
<pre name="code" class="javascript"><span style="font-size:18px;">var x=(n-m)*math.random()+m;</span>
</pre><span style="font-size:18px"><br>
通过合理控制m,n就可以得到需要的值了。</span>
<p></p>
<p><span style="font-family:monospace"><span style="font-size:18px"><span style="white-space:pre">
</span></span></span></p>
<p><span style="font-family:monospace"><span style="white-space:pre"><span style="font-size:18px"><br>
</span></span></span></p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">好了,到这里星星对象创建过程结束,其次需要构建这些星星。
由于星星数目多,可以使用数组对象,每一个数组对象都是一个星星对象:</span></span></span></p>
<p><span style="font-family:monospace"><span style="font-size:18px"><span style="white-space:pre">
</span></span></span></p>
<pre name="code" class="javascript">
<span style="font-size:18px;">
var stars = new array(); //创建星星对象
var starcount = 40; //星星的数目,默认是40
for (var m = 0; m < starcount; m++) //
{
var s = new star(cxt);
s.init();stars[m] = s;
}</span></pre><span style="font-size:18px"><br>
最后使用定时器,使星星具有闪烁效果:</span>
<p></p>
<p><span style="font-family:monospace">
<span style="font-size:18px">
<span style="white-space:pre">
</span>
</span></span></p>
<pre name="code" class="javascript">
<span style="font-size:18px;">
/***************演示闪烁星星的函数**********************/
function playstars() //演示星星
{
for (var n = 0; n < starcount; n++)
{
stars[n].getcolor();
stars[n].drawstar();
}
}</span></pre><span style="font-size:18px"> setinterval("playstars()",500);</span>
<p></p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">这样,闪烁的星星就全部做完了。</span></span></span></p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">以上就是我说的利用对象构建闪烁星星的过程。
大家可以看到利用对象的简便和独立性,希望还不熟悉的朋友可以熟悉这种方法。</span></span></span></p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px"><br>
</span></span></span></p>
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">最后把star.js中关于星星对象的全部代码写在这里供大家参考</span>
</span></span></p>
<pre name="code" class="javascript"><span style="font-size:18px;">
/******star.js******/
/****以下是星星的对象**********************************/
var star = function (cxt) //定义星的对象
{
this.x = -1;
this.y = -1; //表示横纵坐标
this.style = "";
this.r = -1;
this.scale = 1; //表示缩放倍数
this.angle = 0; //旋转的角度
this.angle1 = 0; //辅助参数
this.getpos = function () //获取随机坐标
{
var xx = 20 + 1200 * math.random();
var yy = 20 + 250 * math.random();
this.x = math.ceil(xx); this.y = math.ceil(yy); //获取了随机坐标
}
this.getangle = function () //得到随机的角度
{
this.angle = math.random() * math.pi;
}
this.getr = function () //获取半径
{
var i = 1 + 4 * math.random();
this.r = math.ceil(i); //获取随机半径
}
this.getcolor = function () //获取随机颜色
{
var n = math.random();
if (n < 0.5)
this.style = "white";
else
this.style = "#bbaab1"; //灰白色
}
this.drawpartstar = function () //部分
{
cxt.save();
cxt.beginpath();
cxt.linecap = "round"; cxt.linewidth = 5;
cxt.fillstyle = this.style;
cxt.translate(this.x, this.y); //位移
cxt.rotate(this.angle1);
//cxt.globalalpha = this.alpha; //设置透明度
cxt.moveto(0, 0);
var xx = 0 - this.r * math.sin(36 / 180 * 3.14);
var yy = 0 - this.r * math.cos(36 / 180 * 3.14);
cxt.lineto(xx, yy);
xx = 0;
yy = 0 - this.r * math.cos(36 / 180 * 3.14)
- this.r * math.sin(36 / 180 * 3.14) * math.tan(72 / 180 * 3.14);
cxt.lineto(xx, yy);
xx = this.r * math.sin(36 / 180 * 3.14);
yy = 0 - this.r * math.cos(36 / 180 * 3.14);
cxt.lineto(xx, yy);
cxt.lineto(0, 0);
cxt.closepath();
cxt.fill();
cxt.restore();
}
this.drawstar = function () //绘制完整的花
{
for (var i = 0; i <= 4; i++) {
this.angle1 = i * 72 / 180 * 3.14 + this.angle;
this.drawpartstar();
}
}
this.init = function () //初始化函数
{
this.getpos();
this.getr();
this.getcolor();
this.getangle();
}
}
/*****************以上是星星的对象**************************/</span
></pre><span style="font-size:18px"><br>
</span>
<p></p>
以上就是html5应用-生日快乐动画之实现星星的示例代码分享的详细内容。