Как создать круг холста с треугольником внутри?

Я хочу создать холст с кругом, а внутри круга должен быть треугольник. Я знаю, как нарисовать простой круг (ниже), но как мне вставить треугольник?

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(75,100,55,0,2 * Math.PI);
context.stroke();

javascript canvas

27.09.2018 12:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

569

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Добавьте эти строки перед вызовом stroke

context.moveTo(75,75);
context.lineTo(100, 100);
context.lineTo(25,150);
context.lineTo(75,75);

Он немного выходит из круга, но вы поняли идею.

27.09.2018 12:33

Ответ принят как подходящий

Чтобы нарисовать треугольник внутри круга, вам нужно вычислить положение вершин. Предположим, что ваш треугольник равносторонний, угол между вершинами составляет 120 градусов или 2 * Math.PI / 3:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

let cw = canvas.width = 300;// the width of the canvas
let ch = canvas.height = 300;// the height of the canvas

let c = {// the circle: coords of the center and the radius
  x:75,y:100,r:55
}

let angle = (2*Math.PI)/3;// the angle between vertices

points = [];// the vertices array
   

for(let i = 0; i < 3; i++){
  let o = {}
  o.x = c.x + c.r*Math.cos(i*angle);
  o.y = c.y + c.r*Math.sin(i*angle);
  points.push(o); 
}

// draw the circle
context.beginPath();
context.arc(c.x,c.y,c.r,0,2 * Math.PI);
context.stroke();


// draw the triangle
context.beginPath();
context.moveTo(points[0].x,points[0].y);
for(let i = 1; i < points.length; i++){
  context.lineTo(points[i].x,points[i].y);
}
context.closePath();
context.stroke();

canvas{border:1px solid}

<canvas id = "myCanvas"></canvas>

@pordix Да, наверное, но мне нужно больше подробностей. Круг должен вращаться вокруг чего. Пожалуйста, задайте еще один вопрос со всеми подробностями. Буду рад помочь.

— 28.09.2018 13:49

27.09.2018 13:24