canvas 从初级到XX 2# 让我们在之前的基础之上,再迈进一步吧 [中级向] (上)

还是老样子,先啰嗦一点前言。

最近各种事务缠身,所以也就隔了比较长的时间才开始码这篇文。希望不会这么快就过气。

好了,接下来就开始码代码。(写到中途,突然感觉到的。本篇设计大量初中物理知识,请怀念的往下看)

这次不像之前,是已经写好的文件,拿出来解析一波,就糊弄出来了一篇随笔。总之,我就一边的编代码,一边写文章。时不时的截图一个效果出来 ,不知道这样,能不能糊弄过去
。。。。

这次,目标是准备实现很多canvas,素材网站上比较常见的烟花效果。只看过几次效果,也许实现的最终效果有些差异。但是,希望大家最后能以自己的能力改成自己更期待的结果,而不是只能跟着我做出一样的东西,没有任何的衍生。那意义就会缺少很多了。

既然是canvas,这一段还是不能省的。(注:往后的文章,可能会省略这段代码。主要记住ctx , width , height 这3个变量各自代表是什么就好了。之后我就直接使用了。所以希望大家多多包涵。)

var drawing = document.getElementById('drawing')
var ctx = drawing.getContext('2d')
var width = drawing.width
var height = drawing.height

View Code
  1. 对烟花的分析:
    大家心里都对,烟花有一定的印象。烟花有一个升空的过程,然后在空中爆炸散开成很多束。然后渐渐消散。
    总之,就是有2种状态了。用一个 Boolean 值来判断就好了。
    除此之外,还有烟花的位置,x, y轴上的速度,以及烟花的各种颜色。当然,还有其他各种属性,一时之间也想不到那么完美,不如我们走一步看一步,如何呢?

    function Fireworks (x, y, xSpeed, ySpeed, color) {
        this.x = x
        this.y = y
        this.xSpeed = xSpeed
        this.ySpeed = ySpeed
        this.color = color
        this.boom = false
        }
    
    
    
    
    
    
    
    

    其实,写到这里挺犹豫的。因为,不知道各位看官的知识面有多广,是否应该用
    class

    ,最终,考量了一下,使用es6的,肯定知道构造函数,但是,反过来就不一定了。所以,也就简单做一个优雅降级吧。

  2. 上天吧!
    嘛。。。此情此景上天的当然是烟花咯。
    继承的写法多种多样,希望大家不要过多的考究。万分感谢。

        Fireworks.prototype.draw = function(){
          ctx.clearRect(0, 0, width, height)
          ctx.beginPath()
          ctx.arc(this.x, this.y, 10 , 0 , 2 *Math.PI)
          ctx.fill()
        }
    
        Fireworks.prototype.toSky = function(){
          this.x += this.xSpeed
          this.y += this.ySpeed
          this.draw()
        }
    

    为了更加的真实,我们还需要模拟重力加速度。
    var
    g = 9.8

    当然,这里只是假设。并不是我们必须设定的和实际的重力加速度一样。只是方便理解,而我百分百的确定,我之后一定会改变这个值的。

    Fireworks.prototype.toSky = function(){
          this.x += this.xSpeed
          this.y += this.ySpeed
          this.ySpeed -= g
          this.draw()
        }
    

    此时。比较细心的朋友,以及正跟着一步步敲代码的朋友,应该都会发现。这段代码里面有一些问题。我当然是故意的啦。

    不然,我就直接去上面改成没问题的代码,然后减掉这一段了!


    问题的bug,就是我们速度的正负值,以及canvas的y轴方向和我们正常习惯的y轴方向。有一些比较厉害的朋友,自己写方法将canvas的轴,修改成,我们通常使用的。
    但是,本篇还是使用的原生的,y轴正方向向下的情况。于是。。我们的烟花要升天。就要使用一个负值的速度。重力加速度,也需要相应的改动。我就不在这里做改动,混字数了,大家可以小修正一下y轴相关值正负,然后创建一个 Fireworks
    实例加一个定时器来调用 toSky

    。就可以看到一小效果了,但是,这样就够了吗?

    其实,我接下来有更多需要丰满的地方。

  3. 现在该做什么呢?
    开头说的那么故弄玄虚,到现在不是就值做出了一个走抛物线的小球吗?而且还是写死的半径为10的黑球。就连之前说好的 color
    都没有加上去。教练,这和说好的不一样啊!!
    所以,本来这一段效果优化的代码,准备放在总体逻辑完成之后再写下来的。但是现在的体验极差。就先丰满这一部分的视觉效果吧。
    首先,做一个简单操作
    var
    r = Math.random.bind(Math)

    很多人看到random。 就感觉有大事要发生。没错,就是这样。让我们对最初的构造函数,先做出小改动吧。

    function Fireworks () {
          var x = width * (r() * .8 + .1)
          this.x = x
          this.y = height
          this.xSpeed = x > width / 2 ? -(20 * r() - 10)  : (20 * r() - 10) 
          this.ySpeed = 20 * r() + 10
          this.color = 'rgb('+ f(r() * 256) +',' + f(r() * 256) + ','+ f(r() * 256) +' )'
          this.radius = 5
          this.dotNum = 20
          this.dots = []
        }
    

    大致的改动,大家都是可以自己看出来的。将起始点,定在canvas的最底部,起始点最少距离左右边缘都会有十分之一的宽度,根据起始点的位置,来决定,x轴的方向。将速度,颜色。都改成了随机数。将圆的半径也定义了进来。

    这些数字类型的值,大多都是可以自己按需修改,或者定义常量来使用。就不要过于纠结了。当然,这些数值都还不完善。只能最后我们添加了定时器,实际运行的时候,才能确定比较合理的数值。

    既然说到了定时器,不如就多说几句吧。一般我们动画上使用的定时器,每帧的间隔都会使用15ms。至于为什么就不说了。随便查一下就能找到,而且说太多了也偏离了本篇的主题了。想多说的就是做动画效果的时候的另外一个API, requestAnimationFrame
    这里也不会介绍太多关于这个API,因为会偏题呀。只是之后会使用,所以,还不太了解的同学,可以先去了解一下这个API。

    到此,似乎,我们实际的效果并没有什么改变。

    那么接下来,就让我来使用新增的2个属性吧。

    Fireworks.prototype.createDotArr = function(){
          var length = this.dots.length
          if (length < this.dotNum) 
            this.dots.push(
              {
                x: this.x, 
                y: this.y
              })
          } else {
            for (var i = 0; i < length - 1; i++) {
              this.dots[i] = this.dots[i + 1]
            }
            this.dots[length - 1] = {
              x: this.x, 
              y: this.y
            }
          }
        }
    
    

    上面这个方法,将我们之前的那个抛物线的圆,经过的点记录下来。因为只是一段较短的抛物线,所以我们暂时只记录20个点。也就是 dotNum
    这个属性控制的点数。

    接下来就是将每个点都进行绘制,所以改写了我们之前的方法。于是就成了这样。

        Fireworks.prototype.draw = function(){
          var self = this
          ctx.clearRect(0, 0, width, height)
          self.dots.forEach(function(v){
            ctx.beginPath()
            ctx.arc(v.x, v.y, self.radius , 0 , 2 * Math.PI)
            ctx.fill()
          })
        }
    
       Fireworks.prototype.toSky = function(){
          this.x += this.xSpeed
          this.y -= this.ySpeed
          this.ySpeed -= g
          this.createDotArr()
          this.draw()
        }
    

    接下来,让我们来进行一下测试。看看现在效果如何了。

    var test = new Fireworks()
        function animate () {
          requestAnimationFrame(function () {
            test.toSky()
            animate()
          })
        }
        animate()

    并不是最终的调用形式。 只是做一个测试的效果。所以,之后这段是不包含在逻辑代码里的。另外,大家可以在做这个测试的时候,去改变构造函数内的常量参数,将它变成你喜欢的样子。我就不多废话了。

    其实,现在看起来好像也还不是很美观,颜色也并没有加上去。那就让我来加上颜色吧。当然并不是你们所想的

    fillStyle = this.color

    。因为这样看起来也并不好看啊。

    Fireworks.prototype.draw = function(){
          var self = this
          ctx.clearRect(0, 0, width, height)
          self.dots.forEach(function(v, i){
            var gradients = ctx.createRadialGradient(v.x, v.y, 1, v.x, v.y, i / self.dots.length * self.radius + 1)
            gradients.addColorStop(0, "rgba(" + self.R + "," + self.G + "," + self.B + "," + i / self.dotNum + ")")
            gradients.addColorStop(1, "rgba(" + self.R + "," + self.G + "," + self.B + ", 0 )")
            ctx.fillStyle = gradients
            ctx.beginPath()
            ctx.arc(v.x, v.y, self.radius , 0 , 2 * Math.PI)
            ctx.fill()
          })
        }
    

    忘记补充的一点,R,G,B属性。是我在构造函数中,将color属性,拆分成了,这3个属性。大家可以自己实现,我就不贴代码了。

    这里采用的渐变色,内部为最深的颜色,但是在点的索引逐渐变大,也就是这个点存在的时间变长的时候,逐渐变的透明,向外部延伸直至完全透明。要保证渐变向外延伸,所以在

    createRadialGradient

    的第六个参数的最后 + 1,以此确保这个值是大于1的。

小结:

至此,就是一个可以上天,但是还不能爆炸的哑炮烟花了。代码敲到这里,主要实现烟花的各种逻辑已经全部都有讲到了,之后的内容没有什么新的知识点,大家可以自己尝试完成接下来的内容。由于时间不足,就写到这里,不久之后,我会回来填坑的。

大家就不要打我了。

博客园-原创精华区稿源:博客园-原创精华区 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » canvas 从初级到XX 2# 让我们在之前的基础之上,再迈进一步吧 [中级向] (上)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录