我正在尝试通过玩此脚本来创建效果。我发现这个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/