[canvas]随机圆圈扩散效果

---

公司官网改版，决定学(zhao)习(ban)一下腾讯集团官网的首页，官网其他部分都没什么难点，主要就是banner动画效果的实现，可没找到腾讯的源码，索性直接从0实现一个

1.随机在页面上生成圆环并慢慢变大
2.到一定尺寸时，渐隐直至消失
3.随机的中心点要在中国地图里

一个就三个需求
先看效果图

`1`%7AAIU%PX(0@@Q53JDU7.png

html简单给一个底图，在底图上面一个空白的canvas

var canvas = document.getElementById('canvas')//实现动画效果
var ctx = canvas.getContext('2d')
var cx = canvas.width = 700
var cy = canvas.height = 550
var round = []
var initRoundPopulation = 18

var canvas2 = document.createElement('canvas')//记录中国地图的边界
var ctx2 = canvas2.getContext('2d')
canvas2.width = cx
canvas2.height = cy 

页面中现有的canvas来做动画，再创建一个canvas节点储存中国地图的边界

//中国地图的边际线
var mapline = [ [125,170],
                [125,140],
                [220,85],
                [247,125],
                [305,180],
                [380,205],
                [450,180],
                [495,125],
                [543,22],
                [663,72],
                [663,125],
                [585,205],
                [585,480],
                [450,480],
                [450,545],
                [390,540],
                [390,480],
                [305,480],
                [290,400],
                [220,400],
                [140,370],
                [80,315],
                [50,180]
            ]

ctx2.beginPath()
ctx2.moveTo(50,180)
for(var i=0;i

将中国地图绘制进canvas2中

function Round_item(index,x,y){ //设置圆环对象的属性
    this.index = index;
    this.x = x
    this.y = y
    this.r = Math.random() * 50 + 1
    this.maxR = Math.floor(Math.random()*50)+30
    this.color = 'white'
    this.globalAlpha = 1
}

Round_item.prototype.draw = function(){ //绘制圆环
    ctx.strokeStyle = this.color
    ctx.globalAlpha = this.globalAlpha
    ctx.shadowBlur = this.r * 2
    ctx.beginPath()
    //注意这里时ctx2
    if(ctx2.isPointInPath(this.x,this.y)){//判断中心点是否在中国地图中
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
    }
    ctx.closePath()
    ctx.stroke()
}

Round_item.prototype.move = function(){//做动画效果
    this.r += 0.15 //圆的半径递增
    var tAlpha = (this.r / this.maxR) //（当前圆的半径）/ （圆半径的最大值）    算出动画完成的百分比
    if(tAlpha> 0.8){  //当完成80%时
        this.globalAlpha -= 0.1 //圆的透明版递减
        if(this.globalAlpha<0.1){ //透明版不能负数
            this.globalAlpha = 0
        }
    }
    if(this.r > this.maxR){ //当圆到达最大比例时
        this.r = 10//将这个圆返回为最小
        this.x = Math.random()*cx//再随机一个坐标
        this.y = Math.random()*cy
        this.globalAlpha = 1//把透明的变为1
    }
    this.draw()//再进行绘制
}

function animate(){
    ctx.clearRect(0,0,cx,cy)

    for(var i in round){
        round[i].move()
    }
    requestAnimationFrame(animate)//一个新的api，详细查看mdn
}

function init(){//初始化
    for(var i=0;i

绘制动画效果，使用面向对象来写这个方法，具体看注释

---

• 主要卡壳就卡在判断是否在中国地图内，一开始寻找判断”一个点是否在不规则图形中“，无果
• 随后发现inpointinpath()的方法，但做判断时，永远为false。一步步检查发现，页面每一帧都会绘制很多路径，这些点不可能在路径里。决定试一试createElement('canvas')来保存地图的路径。
• 最后用生成的圆心来和单独保存的路径进行比较，问题顺利解决