Jump to content
  • 0

График canvas


moskalev_mihail
 Share

Question

Добрый (надеюсь) день!

Решил попробовать сделать график на canvas, но возникла проблема с добавлением случайных точек на этот график. Проблема в том, что каждая точка у меня является объектом с аргументами в виде координат точки (x,y), и я никак не могу понять как с помощью цикла можно создавать новые объекты с новыми координатами.... Скорее всего есть более простой способ, но я до него не додумался.

Вот код:

//Run CANVAS
var canvas = document.getElementById('diagram');
var ctx = canvas.getContext('2d');

//We create a class with a method drawing lines from the previous point
function Point(x,y)
{
this.draw = function(){
ctx.lineTo(x, canvas.height -y);
}
};

//Create object for everyone points
var p0 = new Point(10, 10);
var p1 = new Point(20,100);


//After click the button, drawing diagram
$('button').click(function(){
ctx.beginPath();
ctx.moveTo(0,canvas.height);
p0.draw();
p1.draw();
ctx.stroke();
});

Заранее благодарю)

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

moskalev_mihail,

http://javascript.ru/Math.random - это?

Ну и график, по идее, подразумевает какую-либо функцию...

Неееет, дело не в самих координатах, а в том, каким способом я могу создать новые точки(объекты) в своем коде)

Link to comment
Share on other sites

  • 0

Записывать их в массив, а потом отрисовывать из массива.


var points = [
new Point(x, y),
new Point(x1, y1),
new Point(x2, y2),
new Point(x3, y3),
new Point(x4, y4)
];

for (var i = 0; i < points.length; i++) {
points[i].draw(ctx);
}

Спасибо) Вроде помогло...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy