HTML5大明星CanvasCanvas：画出炫酷火焰效果，网页更有趣

认识Canvas

Canvas真是HTML5里的大明星！用这个东西，可以和JavaScript一起玩转图形、动画什么的，做得好的话，还能做出像Flash那样炫酷的火柴点燃效果。今儿咱就学学怎么用Canvas搞定这玩意，把咱们的网页弄得更有趣！

Canvas基础准备

首先，得在页面上放个Canvas标签，给它添点漂亮的样式。这可是咱们做画布动画的第一步！然后，就用JavaScript去“捕捉”一下Canvas元素的情况，这样咱们才能开始动手画啊～

定义粒子和火球

canvas{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: crosshair;
}

做火焰发射效果先明白，关键的两部分得弄清楚：粒子和火球！粒子就是形成火焰的最小单位，火球就是整个效果的大头儿子。通过设定粒子的各种属性和火球的生死轮回过程，咱们就能掌控火焰发射的各种花样~

鼠标拖动弹弓

要让火球飞起来，得先设定好鼠标拖动弹弓的动作！按住鼠标然后开始拉，这就像在扯弹弓的感觉；松开鼠标就是发射火球那一刹那了，是不是感觉很有乐趣、更有意思？

canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

火球运动与碰撞检测

扔火球的时候，咱们得写个脚本来操纵火球的路线。好玩点的话，咱们还能添加点碰撞检测，让火球碰着浏览器边儿就反射回来，看起来更带劲！视觉效果棒棒哒，用户体验也就上来了嘿嘿。

优化与扩展

particles = {};
newParticle = (function(){  var nextIndex = 0;  return function(x,y,r,o,c,xv,yv,rv,ov){
    particles[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      r: r,
      o: o,
      c: c,
      xv: xv,
      yv: yv,
      rv: rv,
      ov: ov
    };
  };
})();

除了基础功能，我们还能让火光更炫酷！比如多加些声音特效，改变飞舞的粒子路径，搞几个不同的色彩选啥的，让表演变得跟好看。

代码分析与调试

搞定所有功能之后，咱们得好好分析研究下这些源码，搞明白每个代码段是干嘛用的，有啥逻辑关联。这样才能真正学到Canvas编程的精髓，给以后开发更牛的动画效果打个好底子！

fireballs = {};
newFireball = (function(){  var nextIndex = 0;  return function(x,y,xv,yv,life){
    fireballs[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      xv: xv,
      yv: yv,
      life: life
    };
  };
})();

实战演练与总结

最后，搞定了火焰发射特效后咱们就可以开始训练！然后，咱们得好好琢磨下这个过程中学到的东西。这样，就能在Canvas编程这块有更大突破，发现更多好玩儿又费脑筋的项目。