Question

如果我进入网站http://www.chartjs.org/，

我看到移动图表的壁纸如图所示：

我想要实现的是这些文本和按钮背后的移动图形壁纸。我想知道如何在我的网站上实现这一目标？

这是一张真实的图表吗？或者只是一个动画图片？

谢谢！

Answer 1

这是在Chart.JS中制作的准确图表，请注意当您检查该元素位于<canvas id="hero-bar">时。然后，您可以通过在JavaScript中查找ID为hero-bar的元素来查找该图表的工作原理。该条形图的代码恰好从页面的源（http://www.chartjs.org/）中的第108-161行开始。

在这种情况下，值只是在计时器上随机化，下面是该页面上的图表的源代码：

var data = [],
        barsCount = 50,
        labels = new Array(barsCount),
        updateDelayMax = 500,
        $id = function(id){
            return document.getElementById(id);
        },
        random = function(max){ return Math.round(Math.random()*100)},
        helpers = Chart.helpers;


    Chart.defaults.global.responsive = true;


    for (var i = barsCount - 1; i >= 0; i--) {
        data.push(Math.round(Math.random() * 100));
    };
    new Chart($id('hero-bar').getContext('2d')).Bar({
        labels : labels,
        datasets : [{
            fillColor : '#2B303B',
            data : data
        }]
    },{
        showScale : false,
        barShowStroke : false,
        barValueSpacing: 1,
        showTooltips : false,
        onAnimationComplete : function(){
            // Get scope of the hero chart during updates
            var heroChart = this,
                timeout;
            // Stop this running every time the update is fired
            this.options.onAnimationComplete = randomUpdate;

            this.options.animationEasing = 'easeOutQuint';

            randomUpdate();

            function randomUpdate(){
                heroChart.stop();
                clearTimeout(timeout);
                // Get a random bar
                timeout = setTimeout(function(){
                    var randomNumberOfBars = Math.floor(Math.random() * barsCount),
                        i;
                    for (i = randomNumberOfBars - 1; i >= 0; i--) {
                        heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
                    };
                    heroChart.update();
                },Math.random() * updateDelayMax);
            };
        }
    });

Answer 2

广告1.这个“动画”它实际上是用javascript（动态）绘制的，我想他们正在使用自己的插件来创建这样的图形。

广告2. 有很多方法可以达到这种效果

使用js并使用预制动画绘制画布，移动和此动画的时间可以由您自己的集合随机计算选项
你可能只使用CSS和Key-frames重新创建这个图表，你可以在这里阅读它们：http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
此外，我们可以制作更抽象的内容并使用视频作为背景。所以你可以展示任何类型的动画，电影等
您还可以使用svg元素手动绘制此图形（通过设置矢量路径，可以在adobe illustrator中预先准备）然后设置动画 - 有关svg https://css-tricks.com/guide-svg-animations-smil/动画的更多信息

因为你可以看到有很多方法有不同的选项，方案，性能等等。但是对于所有人来说效果将保持不变

如何创建像chartjs一样移动图形的背景？

2 个答案: