canvas动画—圆形散布、活动轨迹

2019年8月31日 253次阅读 来源: chengquan223

引见

在ECharts中看到过这类圆形散布结果，相似css3，恰好项目中想把它用上，but我又不想引入全部echart.js文件，更主要的是想弄邃晓它的道理，所以本身着手。在这篇文章中我们就来剖析完成这类结果的两种要领，先上结果图：
《canvas动画—圆形散布、活动轨迹》

完成道理

经由历程不停的改变圆的半径大小，不停堆叠到达活动的结果，在活动的历程当中，设置当前canvas的通明度context.globalAlpha=0.95，使得canvas上的圆逐步通明直至为0，从而完成这类散布、渐变的结果。

完成要领一

1. 症结技术点
context.globalAlpha = 0.95; //设置主canvas的绘制通明度。
建立暂时canvas来缓存主canas的汗青图象，再叠加到主canvas上。

2. 绘制历程
起首，我们先来写一个绘制圆的要领：

//画圆
var drawCircle = function() {
    context.beginPath();
    context.arc(150, 100, radius, 0, Math.PI * 2);
    context.closePath();
    context.lineWidth = 2; //线条宽度
    context.strokeStyle = 'rgba(250,250,50,1)'; //色彩
    context.stroke();
    radius += 0.5; //每一帧半径增添0.5

    //半径radius大于30时，重置为0
    if (radius > 30) {
        radius = 0;
    }
};

然后，我们建立一个暂时canvas用来缓存主canvas上的汗青图象，设置主canvas的通明度context.globalAlpha=0.95(症结一步)，在每次挪用drawCircle要领绘制一个新圆之前都把主canvas上的图象，也就是之前的图象给绘制到暂时的canvas中，比及drawCircle要领绘制完新圆后，再把暂时canvas的图象绘制回主canvas中。

《canvas动画—圆形散布、活动轨迹》

中心代码以下：

//建立一个暂时canvas来缓存主canvas的汗青图象
var backCanvas = document.createElement('canvas'),
    backCtx = backCanvas.getContext('2d');
    backCanvas.width = width;
    backCanvas.height = height;

    //设置主canvas的绘制通明度
    context.globalAlpha = 0.95;

    //显现行将绘制的图象，疏忽暂时canvas中已存在的图象
    backCtx.globalCompositeOperation = 'copy';

var render = function() {
    //1.先将主canvas的图象缓存到暂时canvas中
    backCtx.drawImage(canvas, 0, 0, width, height);

    //2.消灭主canvas上的图象
    context.clearRect(0, 0, width, height);

    //3.在主canvas上画新圆
    drawCircle();

    //4.等新圆画完后，再把暂时canvas的图象绘制回主canvas中
    context.drawImage(backCanvas, 0, 0, width, height);
};

完成要领二

与上一种要领比拟，这类要领越发简朴，一样是用到了通明度逐步减小直到为0的道理，差别的是这里并没有建立暂时canvas，而是应用了context.globalCompositeOperation属性值source-over和destination-in来合营应用，检察globalCompositeOperation属性引见

中心代码以下：

var render = function() {
    //默认值为source-over
    var prev = context.globalCompositeOperation;

    //只显现canvas上原图象的堆叠部份
    context.globalCompositeOperation = 'destination-in';

    //设置主canvas的绘制通明度
    context.globalAlpha = 0.95;

    //这一步目标是将canvas上的图象变的通明
    context.fillRect(0, 0, width, height);

    //在原图象上堆叠新图象
    context.globalCompositeOperation = prev;

    //在主canvas上画新圆
    drawCircle();
};

地图上的应用

这里我采纳的是第二种体式格局，将散布、渐变结果应用到了百度地图上，觉得还比较炫，检察更多demo

圆形散布动画
《canvas动画—圆形散布、活动轨迹》

活动轨迹动画
《canvas动画—圆形散布、活动轨迹》

总结

要领一、二都能完成一样的结果，假如动画绘制、操纵canvas比较频仍，发起采纳第一种体式格局，用暂时canvas来缓存汗青图象，效力更高。

    原文作者：chengquan223
    原文地址: https://segmentfault.com/a/1190000008560571
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞