我正在尝试通过玩此脚本来创建效果。我发现这个js小提琴并且一直在编辑它。它最初起初是一个不错的降雪效果。我加快了速度,改变了方向,等等。

我潜在地希望能够有多种颜色的“雪花”,而不是基本的白色。 (约4-7种颜色)使用当前的js小提琴有没有简便的方法?

http://jsfiddle.net/7wsetqqa/33/

任何帮助将是巨大的!谢谢你的时间。

canvas {
    background:#183794;
    margin-bottom:10px;
     -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

最佳答案

其他答案是正确的,尽管每次重新绘制时雪花的颜色都会改变,这并不理想。

这是一个为每个雪花分配颜色并坚持使用的版本:

APP.snowflake = function(settings) {
    this.context = settings.context;
    this.x = settings.x || 30;
    this.y = settings.y || 30;
    this.radius = settings.radius || 10;
    this.resistance = settings.resistance || 1;
    this.speed = settings.speed || 0;
    this.velocityx = 0;
    this.velocityy = 0;
    this.color = this.getRandomColor();
};

APP.snowflake.prototype.drawSelf = function () {
    // draw the Snowflake in its new position.
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.context.closePath();
    this.context.fill();
};

APP.snowflake.prototype.getRandomColor = function() {
    colors = ['#F5A9A9', '#FFBF00', '#FFFFFF', '#FF0040', '#58FA58'];
    selected_color = colors[Math.floor(Math.random()*colors.length)];
    return selected_color;
};


在这里提琴:http://jsfiddle.net/ry8vLhw4/

09-28 12:56
查看更多