התחבר | הרשמה | שאלות נפוצות
Anonymous

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

+ פרסם תגובה

2 הודעות עמוד 1 מתוך 1


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

על ידי nush2786 » ה' מאי 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>
סמל אישי של המשתמש

nush2786

  • הודעות: 1
  • הצטרף: ה' מאי 15, 2014 2:44 pm

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

על ידי XainPro » ש' מאי 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>
סמל אישי של המשתמש

XainPro

  • הודעות: 3933
  • הצטרף: ו' פברואר 17, 2012 8:10 pm


+ פרסם תגובה

עמוד 1 מתוך 1