大概是2014年7月7日被导师选中,7月10日与导师第一次沟通。
今天7月11日,周五,做本周的项目汇报,也是第一次汇报。
项目名称:html5光影粒子引擎
由该课题可以知道,要想达到预期效果,需要从两方面入手,即:1.粒子 2.canvas
这几天我从网络中了解了一些,下面先说一下粒子的大概:
1.什么是粒子系统?
粒子系统(particle system)是图形里常用的特效。粒子系统可应用运动学模拟来做到很多不同的效果。
粒子系统在游戏和动画中,常常会用来做雨点、火花、烟、爆炸等等不同的视觉效果。
有时候,也会做出一些游戏性相关的功能,例如敌人被打败后会发出一些闪光,主角可以把它们吸收。
2.粒子的定义
粒子系统模拟大量的粒子,并通常用某些方法把粒子渲染。粒子通常有以下特性:
1.粒子是独立的,粒子之间互不影响(不碰撞、没有力)
2.粒子有生命周期,生命结束后会消失
3.粒子可以理解为空间的一个点,有时候也可以设定半径作为球体和环境碰撞
4.粒子带有运动状态,也有其他外观状态(例如颜色、影像等)
5.粒子可以只有线性运动,而不考虑旋转运动(也有例外)
3.粒子的周期
粒子系统通常可分为三个周期:
a.发射粒子
b.模拟粒子(粒子老化、碰撞、运动学模拟等等)
c.渲染粒子(圆形,线段,影像,精灵等等)
在游戏循环(game loop)中,需要对每个粒子系统执行以上的三个步骤。
粒子在初始化时,年龄设为零,生命则是固定的。年龄和生命的单位都是秒。每个模拟步,都会把粒子老化,即是把年龄增加,年龄超过生命,就会死亡。
接下来大概说一下canvas:
1.canvas是什么?
html5的canvas元素是使用javascript在网页上绘制图像;
画布是一个矩形区域,你可以控制其中的每一个像素;
canvas拥有很多种绘制路径,矩形,圆形,字符以及添加图像的方法;
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成;
简单的说就是在html5中添加<canvas width=xxx height=xxx></canvas>标签,好比flash。
2.canvas通过javascript来绘制2D图形
canvas是逐像素进行渲染的。
在canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注,如果其它位置发生变化,那么整个场景也将需要重新绘制,包括任何或许已经被图形覆盖的对象。
canvas依赖分辨率,不支持事件处理器,弱的文本渲染能力,能够以.png或.jpg格式保存结果图像。
canvas最适合图像密集型的游戏,其中的许多对象会被频繁重绘。
IE9以下的浏览器是不支持canvas的。
3.canvas画图基本知识
(1)canvas.getContext("2d")方法会返回一个对象,这个对象给我们封装了很多的绘图方法和属性,但只给提供2d的画图环境。
(2)canvas坐标系是一个二维的平面,原点坐标在画布的左上角,沿着水平方向向右是x轴正方向,垂直方向向下是y轴的正方向。
4.简单应用举例
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function(){
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
//var colorObj=cobj.createLinearGradient(0,0,100,0); //设置线性渐变和其范围
var colorObj=cobj.createRadialGradient(50,50,10,50,50,50);//设置放射性渐变(圆心,半径)
//var imgObj=cobj.createPattern(document.getElementById("img"),"repeat");//图片填充法(平铺)repeat-x repeat-y
colorObj.addColorStop(0,"red");//从0到1,红色到绿色的渐变
colorObj.addColorStop(0.5,"blue");
colorObj.addColorStop(1,"green");
cobj.shadowColor="black";//设置阴影
cobj.shadowOffsetX=3;//设置阴影偏移量
cobj.shadowOffsetY=3;
cobj.shadowBlur=5;//设置阴影模糊度
cobj.fillStyle=colorObj;//指定要填充的颜色,默认为黑色,colorObj不加引号,red加引号,图片填充换为imgObj
cobj.strokeStyle="green";//指定边框的颜色
cobj.fillRect(0,0,100,100);//已填充的
cobj.strokeRect(100,100,100,100);//未填充的
}
</script>
<style>
canvas{
background:gray;
}
</style>
</head>
<body>
<canvas width=400 height=400 id="canvas"> //画布真正的宽高不能在css中设置
您的浏览器不支持canvas
</canvas>
<img src="1.jpg" id="img">
canvas画布
</body>
</html>