تسجيل الدخول | التسجيل | الأسئلة المتكررة
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