开源夏令营之项目汇报1

来源：互联网发布：淘宝店铺模板免费下载编辑：程序博客网时间：2024/05/04 22:39

大概是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.onload=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>

0 0