登录 | 注册 | FAQ
Anonymous

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

+ 发表回复

2 篇帖子 分页: 1 / 1


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

nush2786 » 周四 5月 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
  • 注册: 周四 5月 15, 2014 2:44 pm

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

XainPro » 周六 5月 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
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1