Question

首先，我不仅是整个编码过程中HTML5或Canvas中的新功能。我使用了这个示例http://rectangleworld.com/demos/DustySphere/DustySphere.html并试图以一种我可以根据自己的需要使用它的方式对其进行修改。

目前它看起来像 this.

code is on codepen

现在我尝试组合不同的设置并同时生成2个不同的粒子动画。例如：2050年和2070年的粒子应该在2090年合并出现。这个问题有什么简单的解决方案吗？我感谢每一个帮助。

Answer 1

使用函数

绘制具有不同设置的粒子

由于您不熟悉编码，我想知道您是否了解function。

arguments是可重复使用的代码块。
您可以发送function以使用该功能。
参数可以使函数在执行代码时应用不同的设置。

这是一个使用单个// draw a small red circle at [x=50,y=50] with full alpha drawParticle(50,50,10,'red',1.00); // draw a large green circle at [x=150,y=100] with half alpha drawParticle(150,100,50,'green',0.50); function drawParticle(cx,cy,radius,color,alpha){ ctx.beginPath(); ctx.arc(cx,cy,radius,0,Math.PI*2); ctx.fillStyle=color; ctx.globalAlpha=alpha; ctx.fill(); }的快速示例，它接受不同的参数来绘制具有不同设置的粒子。

通常，您可以通过创建接受参数来绘制各种设置的函数来应用不同的设置。这样，您可以使用不同的设置多次调用相同的函数。

if

对于更复杂的设置，您可以使用if语句绘制各种设置

例如，此功能可让您绘制一个从0到100“老化”的粒子。

将粒子的年龄作为参数传递，函数使用function drawParticle(cx,cy,radius,color,age){ ctx.beginPath(); ctx.arc(cx,cy,radius,0,Math.PI*2); ctx.fillStyle=color; if(age<25){ ctx.globalAlpha=1.00; }else if(age<50){ ctx.globalAlpha=.75; }else if(age<75){ ctx.globalAlpha=.50; }else{ ctx.globalAlpha=.25; } ctx.fill(); }语句在粒子老化时减少粒子的alpha值。

public abstract class TTTree<K extends Comparable<K>, V> {

        public abstract TTTree<K, V> put(K k, V v);

        private static <K extends Comparable<K>, V> TTTree<K, V> leaf(K k, V v) { return null; }

        private static class Leaf<K extends Comparable<K>, V> extends TTTree<K, V> {

            private final K k = null;
            private final V v = null;

            @Override
            public TTTree<K, V> put(K ik, V iv) {
                TTTree<K, V> newLeaf = leaf(ik, iv);
                return node(newLeaf, k, this); // <---- !!!! ERROR !!!!
            }
        };

        private static <K extends Comparable<K>,V> TTTree<K, V> node(TTTree<K, V> l, K k, TTTree<K, V> r) {
            return null;
        }
    }

HTML5同时使用不同的设置生成粒子

1 个答案: