javascript - 如何更改此 "snow script"中雪的颜色

标签 javascript jquery css animation canvas

我正在尝试通过播放此脚本来创建效果。我找到了这个 js fiddle 并且一直在编辑它。它最初是作为一个漂亮的雪效果开始的。我已经加快了速度,改变了方向等等。

我可能希望能够拥有多种颜色的“雪花”,而不是基本的白色。 (大约 4-7 种颜色)有没有一种简单的方法可以使用当前的 js fiddle 来做到这一点?

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;
};

在这里 fiddle :http://jsfiddle.net/ry8vLhw4/

关于javascript - 如何更改此 "snow script"中雪的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35592554/

相关文章:

php - 在 PHP 文件中使用 jquery 显示 div

javascript - 每次点击改变背景

javascript - 使用angularjs根据标题的高度更改顶部填充

javascript - Slidetoggle JS 元素内的文本中断

javascript - JQuery 自动完成 - 选择第一项

javascript - 为什么 componentWillUpdate() 和 componentWillMount() 在这些方法中使用 setState 时不会触发渲染功能?

javascript - 如何使视口(viewport)跟随此 javascript 代码中的矩形?

jquery - 使下拉父链接对于较小的设备可点击,并在 Bootstrap 中隐藏下拉菜单

twitter-bootstrap - Bootstrap3 在小屏幕上用 input-sm 替换 input-lg

javascript - 使用百分比调整 div 大小时 Mapquest 窗口不显示