Построить график функции тангенс в квадрате

@AbraHa · Регистрация: 25.10.2017

Студворк — интернет-сервис помощи студентам

Нужно построить график функции тангенс в квадрате tan²(x). Помогите, у меня не получается.
Вот мой код.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="myCan" width="520" height="520" style="border: 2px solid #000000"></canvas>
      <button type="button" onclick="drawgrid();">Нарисовать решетку</button>
      <button type="button" onclick="clearGrid();">Стереть</button>
      <button type="button" onclick="drawAxle();">Нарисовать оси</button>
      <button type="button" onclick="drawGraph();">Нарисовать график</button>
        <p>Мышь: <span id="x">0</span></p>
        <p> <span id="y">0</span></p>
        <hr>
</body>
<script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var can = document.getElementById('myCan');
var ctx = can.getContext('2d');
ctx.rotate(270/180*Math.PI);
ctx.translate(-520, 0);
var step = 20;//шаг решотки
//рисуем
function func(x) {
    return(Math.pow(Math.tan(x/180*Math.PI),2));
}
function drawgrid(){
    for (var i = step; i<can.width; i+=step){//рисуем вертикальные
        ctx.beginPath();
        ctx.strokeStyle = '#eee';
        ctx.lineWidth = 1;
        ctx.moveTo(i, 0);
        ctx.lineTo(i, can.height);
        ctx.closePath();
        ctx.stroke();
}
    for (var i = step; i<can.height; i+=step){//рисуем Горизонтальные
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(can.width, i);
        ctx.closePath();
        ctx.stroke();
    }
 
}
  //стираем
  function clearGrid(){
    ctx.clearRect(0, 0, can.width, can.height);
  }
  function drawAxle(){
    // Рисуем ось X красным цветом
    ctx.beginPath();
    ctx.moveTo(0, can.height/2);
    ctx.lineTo(can.width, can.height/2);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 3;
    ctx.closePath();
    ctx.stroke();
     
    // Рисуем ось Y зелёным цветом
    ctx.beginPath();
    ctx.moveTo(can.width/2, 0);
    ctx.lineTo(can.width/2, can.height);
    ctx.strokeStyle = 'green';
    ctx.closePath();
    ctx.stroke();
  }
function drawGraph(){
const pi = 3.14159 * 25;
//alert(canvas.width/10);
  ctx.strokeStyle = "blue";
  ctx.beginPath();
  cx = can.width / 2;
  cy = can.height / 2;
  ctx.moveTo(cx, cy);
  for (i = 1; i<260; i++) {
    x = i;
    y = func(x);
    ctx.lineTo(cx+x, cy+y);
  }
  ctx.lineWidth = 4;
  ctx.stroke()
}
 
  //мыша
  can.addEventListener('mousemove', function(evt){
    document.getElementById('x').innerHTML = evt.pageX;
    document.getElementById('y').innerHTML = evt.pageY;
  });

HTML5
1
2
</script>
</html>

@j2FunOnly · 17.05.2018, 08:55

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function drawGraph() {
  const pi = 3.14159 * 25;
  // alert(can.width/10);
  ctx.strokeStyle = "blue";
  ctx.lineWidth = 4;
  ctx.beginPath();
  cx = can.width / 2;
  cy = can.height / 2;
  ctx.moveTo(cx, cy);
  for (var i = 1; i < 260; i++) {
    x = i;
    y = func(x);
    ctx.lineTo(cx + x, cy + y);
    ctx.stroke();
  }
  // ctx.stroke()
}

@AbraHa · 17.05.2018, 08:56 **[ТС]**

Я кое-как да написал "работающий" код, но работает он неправильно. График рисуется не в правильной четверти. Как можно это исправить?

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var can = document.getElementById('myCan');
var ctx = can.getContext('2d');
var step = 20;//шаг решотки
//рисуем
function func(x) {
    return(Math.pow(Math.tan(x/180*Math.PI),2));
}
function drawgrid(){
    for (var i = step; i<can.width; i+=step){//рисуем вертикальные
        ctx.beginPath();
        ctx.strokeStyle = '#eee';
        ctx.lineWidth = 1;
        ctx.moveTo(i, 0);
        ctx.lineTo(i, can.height);
        ctx.closePath();
        ctx.stroke();
}
    for (var i = step; i<can.height; i+=step){//рисуем Горизонтальные
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(can.width, i);
        ctx.closePath();
        ctx.stroke();
    }
 
}
  //стираем
  function clearGrid(){
    ctx.clearRect(0, 0, can.width, can.height);
  }
  function drawAxle(){
    // Рисуем ось X красным цветом
    ctx.beginPath();
    ctx.moveTo(0, can.height/2);
    ctx.lineTo(can.width, can.height/2);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 3;
    ctx.closePath();
    ctx.stroke();
     
    // Рисуем ось Y зелёным цветом
    ctx.beginPath();
    ctx.moveTo(can.width/2, 0);
    ctx.lineTo(can.width/2, can.height);
    ctx.strokeStyle = 'green';
    ctx.closePath();
    ctx.stroke();
  }
function drawGraph(){
const pi = 3.14159 * 25;
//alert(canvas.width/10);
  ctx.strokeStyle = "blue";
  ctx.beginPath();
  cx = can.width / 2;
  cy = can.height / 2;
  ctx.moveTo(cx, cy);
  for (i = 0; i<180*10; i+=5) {
    x = i/5;
    y = func(i);
    ctx.lineTo(cx+x, cy+y);
  }
  ctx.lineWidth = 1;
  ctx.stroke()
}
 
  //мыша
  can.addEventListener('mousemove', function(evt){
    document.getElementById('x').innerHTML = evt.pageX;
    document.getElementById('y').innerHTML = evt.pageY;
  });

@AbraHa · 17.05.2018, 10:04 **[ТС]**

Так не совсем правильно получается. Выводит только одну ветвь, а их бесконечное кол-во. Как сделать хоть так, чтобы график заполнил всю сетку (Как не предыдущей картинке)? Перепробовал вроде все, но не получается.

@AbraHa · 17.05.2018, 11:41 **[ТС]**

*(Как в предыдущей картинке)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@AbraHa 1 / 1 / 0 Регистрация: 25.10.2017 Сообщений: 119
	17.05.2018, 10:04 [ТС]
	Так не совсем правильно получается. Выводит только одну ветвь, а их бесконечное кол-во. Как сделать хоть так, чтобы график заполнил всю сетку (Как не предыдущей картинке)? Перепробовал вроде все, но не получается. Миниатюры 0

@AbraHa 1 / 1 / 0 Регистрация: 25.10.2017 Сообщений: 119
	17.05.2018, 11:41 [ТС]
	*(Как в предыдущей картинке) 0