Создание дождя с помощью холста.Я могу создать отдельную каплю, которая падает или случайно падает на вершину, но как мне объединить эти два эффекта? - PullRequest
Новая
       1

Создание дождя с помощью холста.Я могу создать отдельную каплю, которая падает или случайно падает на вершину, но как мне объединить эти два эффекта?

0 голосов
/ 11 февраля 2019

Я пытаюсь создать эффект дождя, используя холст.В коде я добавил комментарии «ТОЧКА 1», «ТОЧКА 2» и «ТОЧКА 3», чтобы помочь вам понять, о какой части я говорю.

  • «ТОЧКА 1» создает несколько капель со случайной осью X и осью Y, равной 0.
  • «ТОЧКА 3» (закомментированная) создает одну каплю, которая правильноувеличивает ось у, так что капля падает.

Мне нужно, чтобы «ТОЧКА 3» применялась к каждой капле, которая создается в «ТОЧКЕ 1».«ТОЧКА 2» является частью моей попытки сделать это, но вместо этого он создает новую каплю, которая меньше, чем опускает каплю, которая была создана ранее.

Любая помощь очень ценится,

Стив.

Я создал для этого скрипку JS: https://jsfiddle.net/xrainbowuk/qaws59uz/10/

/* ///// ///// ///// ///// */

var canvas = document.querySelector("canvas");

var c = canvas.getContext("2d");

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//RAIN DROP CONSTRUCTOR FUNCTION
function Rain(rainDropStandardX, rainDropStandardY, opacity) {
    this.rainDropStandardX = rainDropStandardX;
    this.rainDropStandardY = rainDropStandardY;
    this.opacity = opacity;
    
    var dropTipX = rainDropStandardX + 0;
    var dropTipY = rainDropStandardY + 0;
    var dropBottomLeftX = rainDropStandardX - 15;
    var dropBottomLeftY = rainDropStandardY + 40;
    var dropBottomRightX = rainDropStandardX + 15;
    var dropBottomRightY = rainDropStandardY + 40;
    
    this.droplet = function() {
        c.beginPath();
        c.moveTo(dropTipX, dropTipY); // line on the right 
        c.bezierCurveTo(dropBottomLeftX, dropBottomLeftY, dropBottomRightX, dropBottomRightY, dropTipX, dropTipY);
        c.fillStyle = "rgba(43, 173, 255, " + this.opacity + ")";
        c.fill();
    }
}

/* POINT 1 - This piece of code produces multiple droplets but their "y-axis" value never increases */
var rngPosY = 0;

setInterval(function() {
    var rngPosX = Math.random() * canvasWidth;
    var rngOpacity = Math.random() * (1 - 0.1) + 0.1;
    
    var rainDrop = new Rain(rngPosX, rngPosY, rngOpacity);
    rainDrop.droplet();
    //rngPosY += 10; /* POINT 2 - This will make the next droplet lower (increase y-axis). Not lower the individual droplets */
}, 500);

/* POINT 3 - A single droplet is created and then the "y-axis" value increases */
/*
var rngPosY = 0;
var rngPosX = Math.random() * canvasWidth;
var rngOpacity = Math.random() * (1 - 0.1) + 0.1;

setInterval(function() {
    c.clearRect(0, 0, canvasWidth, canvasHeight);
    var rainDrop = new Rain(rngPosX, rngPosY, rngOpacity);
    rainDrop.droplet();
    rngPosY += 5;
}, 1);
*/
* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body {
    height: 100%;
    width: 100%;
}

canvas {
    background-color: #000;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Rain</title>
    <link href="css/RG5.css" rel="stylesheet" type="text/css">
</head>
<body>
    <canvas>
     Your browser does not support HTML canvas.
    </canvas>
    
    
    
    
    
    
    
    
    <script src="js/RG5.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 11 февраля 2019

Вам понадобится массив для хранения ваших капель.В моем коде этот массив: var rain.Также вам понадобится метод для обновления каждой капли.

Еще одна важная мысль - это способ удаления капель из массива, если позиция y равна> canvasHeight.

if (d.rainDropStandardY > canvasHeight) {
      rain.splice(i, 1);
    }


var canvas = document.querySelector("canvas");

var c = canvas.getContext("2d");

var canvasWidth = (canvas.width = window.innerWidth);
var canvasHeight = (canvas.height = window.innerHeight);
// an array where to save the drops of rain
var rain = [];

//RAIN DROP CONSTRUCTOR FUNCTION
function Rain(rainDropStandardX, rainDropStandardY, opacity) {
  this.rainDropStandardX = rainDropStandardX;
  this.rainDropStandardY = rainDropStandardY;
  this.opacity = opacity;
  // the speed of the drop: a different one for every drop
  this.v = {
    x: .5 + Math.random(),
    y: .5 + Math.random() * 10
  };
  //console.log(this.v)

  this.droplet = function() {
    var dropTipX = this.rainDropStandardX + 0;
    var dropTipY = this.rainDropStandardY + 0;
    var dropBottomLeftX = this.rainDropStandardX - 15;
    var dropBottomLeftY = this.rainDropStandardY + 40;
    var dropBottomRightX = this.rainDropStandardX + 15;
    var dropBottomRightY = this.rainDropStandardY + 40;

    c.beginPath();
    c.moveTo(dropTipX, dropTipY); // line on the right
    c.bezierCurveTo(
      dropBottomLeftX,
      dropBottomLeftY,
      dropBottomRightX,
      dropBottomRightY,
      dropTipX,
      dropTipY
    );
    c.fillStyle = "rgba(43, 173, 255, " + this.opacity + ")";
    c.fill();
  };


// a method to update the position of the drop
  this.update = function() {
    this.rainDropStandardX += this.v.x;
    this.rainDropStandardY += this.v.y;

    this.droplet();
  };
}

/* This piece of code produces multiple droplets but their "y-axis" value never increases */
var rngPosY = 0;

setInterval(function() {
  var rngPosX = Math.random() * canvasWidth;
  var rngOpacity = Math.random() * (1 - 0.1) + 0.1;
  // you create a new drop and push it in the array
  rain.push(new Rain(rngPosX, rngPosY, rngOpacity));

  //rngPosY += 10; /*This will make the next droplet lower (increase y-axis). Not lower the individual droplets */
}, 500);

function frame() {
  window.requestAnimationFrame(frame);
  c.clearRect(0, 0, canvasWidth, canvasHeight);
  // for every drop in the array
  rain.forEach((d, i) => {
    //you update the position and redraw the drop
    d.update();
    // if the trop is out of the canvas you remove the drop from the array
    if (d.rainDropStandardY > canvasHeight) {
      rain.splice(i, 1);
    }
  });
}
frame();
* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body {
    height: 100%;
    width: 100%;
}

canvas {
    background-color: #000;
}
<canvas>Your browser does not support HTML canvas.
    </canvas>

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...