Применить градиент на холст и движущиеся шары - PullRequest
Новая
       29

Применить градиент на холст и движущиеся шары

0 голосов
/ 06 октября 2018

Пытаюсь применить линейный градиент к моему холсту, и он движется, но я не знаю, где я ошибся, так как ничего не меняется.Я пытаюсь использовать произвольно окрашенный и случайный угол наклона каждый раз.Я думаю, что проблема в моей функции загрузки, когда я создаю линейный градиент 

var $ = function(id) {return document.getElementById(id);};

var bounce;
var my_canvas;
var ball_array = new Array();
var linear_gradient;
var timer; //global variable to keep current timer

function randomGradient()
{
var color1 = randomColor(); //color 1
var color2 = '#FFFFFF'; //color 2
var gradient_angle = Math.round(Math.random()*360);
var random_gradient = "linear-gradient(" + gradient_angle + "deg, " + color1 + ", " + color2 + ")";
return random_gradient;
}

function ball(){
this.x=Math.random()*my_canvas.canvas.width;
this.y=Math.random()*my_canvas.canvas.height;
this.vx = (Math.random()-0.5);
this.vy = (Math.random()-0.5);
 this.color = randomGradient();
 this.radius = 12;
this.move=ball_move;
this.draw=ball_draw;
 }
 function ball_draw(){                    
 my_canvas.save();
 my_canvas.fillStyle=this.color; //****
 my_canvas.strokeStyle='black';
 my_canvas.lineWidth=2;
 my_canvas.beginPath();
my_canvas.arc(this.x, this.y, this.radius,0, 6.28, false);
 my_canvas.closePath();
 my_canvas.stroke();
 my_canvas.fill();
 my_canvas.restore();
 }

 function create_balls(){
 for(var i=0;i<75;i++){
    var temp=new ball();
    ball_array.push(temp);
 }
 }
    function resize_can(){
my_canvas.canvas.width = window.innerWidth/2;
my_canvas.canvas.height = window.innerHeight/2;
    }

    window.onload = function() {
    bounce = -1;
    my_canvas = $("myCanvas").getContext('2d');
    linear_gradient = my_canvas.createLinearGradient(0,0,window.innerWidth / 2,window.innerHeight / 2); //create linear gradient
    window.onresize = resize_can;
    resize_can(); 
    create_balls();
    timer = setInterval(going,5);
  };

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Вам нужно создать градиенты с помощью canvas, вы не можете просто использовать строку CSS с линейным градиентом 

ctx.fillStyle = "linear-gradient(50%, red, blue)";  // WON'T WORK!

Использовать 

const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");

Кроме того, градиенты относятся кЕсли вы хотите, чтобы градиенты оставались относительно окружностей, вам нужно перевести начало координат при рисовании.Другими словами, вместо 

ctx.arc(x, y, ...)

Вам нужно 

ctx.translate(x, y);
ctx.arc(0, 0, ...)

Обратите внимание, что я изменил ваш код, чтобы он стал более современным JS для некоторого определения слова "современный".Примеры, используйте const и let, где это уместно, никогда не используйте var, используйте class, используйте requestAnimationFrame, вычисляйте дельта-время между кадрами и делайте частоту кадров анимации независимой, используйте querySelector вместо getElementById, используйте [] вместо new Array, избавьтесь от window.onload (поместите ваши скрипты в конец вашего файла или используйте defer), используйте ctx против my_canvas (ничего не случилось с my_canvas за исключением того, что это не "холст", это "контекст холста" или, более конкретно, CanvasRenderingContext2D

const $ = function(selector) {
  return document.querySelector(selector);
};

const ctx = $("#myCanvas").getContext('2d');
const ball_array = [];

function randomColor() {
  return `hsl(${Math.random() * 360}, 100%, 50%)`;
}

function randomGradient(size) {
  const gradient = ctx.createLinearGradient(-size, 0, size, 0);
  gradient.addColorStop(0, randomColor());
  gradient.addColorStop(1, '#FFFFFF');
  return gradient;
}

// JS style, constructors are always Capitalized
class Ball {
  constructor() {
    this.x = Math.random() * ctx.canvas.width;
    this.y = Math.random() * ctx.canvas.height;
    this.vx = (Math.random() - 0.5) * 50;
    this.vy = (Math.random() - 0.5) * 50;
    this.radius = 12;
    this.color = randomGradient(this.radius);
    this.angle = Math.random() * Math.PI * 2;
  }

  draw() {
    ctx.save();
    ctx.fillStyle = this.color; //****
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);  // because you wanted the gradient at a random angle
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, 0, 6.28, false);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    ctx.restore();
  }

  move(deltaTime) {
    // you didn't provide this code so I made something up.
    this.x = (this.x + this.vx * deltaTime + ctx.canvas.width) % ctx.canvas.width;
    this.y = (this.y + this.vy * deltaTime + ctx.canvas.height) % ctx.canvas.height;
  }
};

let then = 0;
function going(now) {
  now *= 0.001;  // convert to seconds
  const deltaTime = now - then;
  then = now;

  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ball_array.forEach((ball) => {
    ball.move(deltaTime);
    ball.draw();
  });
  requestAnimationFrame(going);      
}

function create_balls() {
  for (let i = 0; i < 75; i++) {
    const temp = new Ball();
    ball_array.push(temp);
  }
}

function resize_can() {
  ctx.canvas.width = window.innerWidth / 2;
  ctx.canvas.height = window.innerHeight / 2;
}

window.onresize = resize_can;
resize_can();
create_balls();

requestAnimationFrame(going);
<canvas id="myCanvas"></canvas>
0 голосов
/ 06 октября 2018

Вам нужно заполнить свой холст и выбрать цвета градиента.

Что-то вроде: 

my_canvas = $("myCanvas").getContext('2d');
var linear_gradient = my_canvas.createLinearGradient(0,0,window.innerWidth / 2,window.innerHeight / 2);
linear_gradient.addColorStop(0, "black");
linear_gradient.addColorStop(1, "white");

my_canvas.fillStyle = linear_gradient;
my_canvas.fillRect(0,0,100,100);
...