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

时间:2023-01-12 16:18:39

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

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

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

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

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

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

var drawing = document.getElementById('drawing')
var ctx = drawing.getContext('2d')
var width = drawing.width
var height = drawing.height
  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(, , width, height)
    ctx.beginPath()
    ctx.arc(this.x, this.y, , , *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的。

小结:

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

大家就不要打我了。