Zaloguj | Zarejestruj | FAQ
Anonymous

עיגול עם נקודות רנדומליות

+ Odpowiedz

Posty: 2 Strona 1 z 1


עיגול עם נקודות רנדומליות

przez nush2786 » Cz maja 15, 2014 2:48 pm

שלום
אני צריכה ליצור מעגל בתוך html canvas 1200x1200 ולמלא אותו בנקודות רנדומליות.
ובעזרת אלגוריתם למצוא את הדרך הכי קצרה יחסית לחבר את כל הנקודות.
את המעגל בניתי מפה אני לא מצליחה להתקדם אם תוכלו בבקשה לכוון אותי להמשך התרגיל.

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
</script>
</body>
</html>
Avatar użytkownika

nush2786

  • Posty: 1
  • Dołączył(a): Cz maja 15, 2014 2:44 pm

Re: עיגול עם נקודות רנדומליות

przez XainPro » So maja 17, 2014 9:55 am

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);

// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1