HistoryART
@HistoryART
Надзиратель

Как создать такую паутинку на канвасе?

Добрый день! Скажите пожалуйста как мне реализовать подобное на канвасе? Чтобы я мог допустим 5 переменных подключить и в зависимости от вводных менять дистанции по x/y? Спасибо.

5e19c3f26c802927551577.jpeg
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
Вот пример на D3js – интерактивный, реагирует на мышку. Реализация на SVG, но можно переписать и на canvas, если это так важно.

index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
		<title>Smoothed Radar Chart</title>

		<!-- Google fonts -->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

		<!-- D3.js -->
		<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
		<script src="https://d3js.org/d3-path.v1.min.js" charset="utf-8"></script>
		<script src="radarChart.js" charset="utf-8"></script>
		<style>
			body {
				font-family: 'Open Sans', sans-serif;
				font-size: 11px;
				font-weight: 300;
				fill: #242424;
				text-align: center;
				text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
				cursor: default;
			}

			.legend {
				font-family: 'Raleway', sans-serif;
				fill: #333333;
			}
		</style>
	</head>
	<body>
		<div class="radarChart" style="display: inline-flex;"></div>
		<div class="radarChart2" style="display: inline-flex;"></div>
		<script>
			//////////////////////////////////////////////////////////////
			//////////////////////// Set-Up //////////////////////////////
			//////////////////////////////////////////////////////////////

			var margin = { top: 50, right: 80, bottom: 50, left: 80 },
				width = Math.min(700, window.innerWidth / 4) - margin.left - margin.right,
				height = Math.min(width, window.innerHeight - margin.top - margin.bottom);

			//////////////////////////////////////////////////////////////
			////////////////////////// Data //////////////////////////////
			//////////////////////////////////////////////////////////////

			var data = [
				{ name: 'Allocated budget',
					axes: [
						{axis: 'Sales', value: 42},
						{axis: 'Marketing', value: 20},
						{axis: 'Development', value: 60},
						{axis: 'Customer Support', value: 26},
						{axis: 'Information Technology', value: 35},
						{axis: 'Administration', value: 20}
					]
				},
				{ name: 'Actual Spending',
					axes: [
						{axis: 'Sales', value: 50},
						{axis: 'Marketing', value: 45},
						{axis: 'Development', value: 20},
						{axis: 'Customer Support', value: 20},
						{axis: 'Information Technology', value: 25},
						{axis: 'Administration', value: 23}
					]
				}
			];

			//////////////////////////////////////////////////////////////
			////// First example /////////////////////////////////////////
      ///// (not so much options) //////////////////////////////////
			//////////////////////////////////////////////////////////////
			var radarChartOptions = {
			  w: 290,
			  h: 350,
			  margin: margin,
			  levels: 5,
			  roundStrokes: true,
				color: d3.scaleOrdinal().range(["#26AF32", "#762712"]),
				format: '.0f'
			};

			// Draw the chart, get a reference the created svg element :
			let svg_radar1 = RadarChart(".radarChart", data, radarChartOptions);

			//////////////////////////////////////////////////////////////
			///// Second example /////////////////////////////////////////
			///// Chart legend, custom color, custom unit, etc. //////////
			//////////////////////////////////////////////////////////////
			var radarChartOptions2 = {
			  w: 290,
			  h: 350,
			  margin: margin,
			  maxValue: 60,
			  levels: 6,
			  roundStrokes: false,
			  color: d3.scaleOrdinal().range(["#AFC52F", "#ff6600"]),
				format: '.0f',
				legend: { title: 'Organization XYZ', translateX: 100, translateY: 40 },
				unit: '$'
			};

			// Draw the chart, get a reference the created svg element :
			let svg_radar2 = RadarChart(".radarChart2", data, radarChartOptions2);
		</script>
	</body>
</html>


radarChart.js
Ответ написан
@Karpion
Первое направление имеет угол 90 градусов от горизонтали. Каждое следующее - на 360/5 градусов меньше (там есть отрицательные углы). Итак, вычислим все пять углов.

Теперь рассмотрим произвольное направление. Угол мы знаем. Берём расстояние.
Координата X = расстояние * cos(угол),
координата Y = расстояние * sin(угол),
и так для всех пяти точек. Теперь по пяти точкам - строим пятиугольник. Школьная геометрия!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы