Форум

Иса Мирзоев · #1 (**permalink**) 15.08.2019, 22:57

Всех приветствую. Часто мне помогаете. Выручите снова, пожалуйста) Осваиваю канвас, все бы ничего, но мой график всегда смещенный, а ошибки я найти не могу. Сам путаюсь в осях, честно говоря. Если делать квадратный график, то все норм. Я примерно понимаю, что ошибка, вероятно, в стартовых точках, но перепробовал все, а найти не удается ее(( Есть комментарии от нуба, если это поможет) Спасибо большое))
п.с. нужно только найти ошибку, где мне исправить. Понимаю, что код нубский, а график уродский, но мне главное суть понять. Переписывать половину кода для оптимизации не нужно, иначе я совсем запутаюсь((( Спасибо всем

//график

//определяем канвас
//задаем размеры и цвета, ширину линий и шрифт
//задаем стартовые значения осей
//рисуем оси


var canv = document.getElementById("canv")
var canvas = canv.getContext("2d")

canv.width = 800
canv.height = 500
canvas.lineWidth = 2
canvas.font = "Georgia 10px"
canvas.strokeStyle = "red"

var oy=canv.width/2
var ox=canv.height/2


canvas.beginPath()
canvas.moveTo(oy,0)
canvas.lineTo(oy,canv.height)
canvas.moveTo(0,ox)
canvas.lineTo(canv.width,ox)
canvas.stroke()
canvas.closePath()


//определяем длину шага в пунктах, количество шагов, цвет и толщину
//через 2 цикла задаем описание цифр, указав связь i с шагом, перезадавая количество шагов для разных осей


var step = 50
var steps = canv.width/step
canv.lineWidth = 1
canvas.fillStyle = "black"
canvas.lineWidth = 1

for(i=0; i<steps; i++){
canvas.fillText((i*step)-oy,i*step+2,ox+10)
}

steps = canv.height/step

for(i=0; i<=steps; i++){
canvas.fillText(ox-(i*step),oy+2,i*step+10)   
}



canvas.strokeStyle = "gold"
canvas.strokeText("Y",oy-12,12)
canvas.strokeText("X",canv.width-8,ox-8)


//пишем будущую функцию и цвет графика
//задаем стартовые точки
//начинаем канвас со стартовыми точками
//проходимся циклом, где переводим новые точки в старые и указываем конечные данные канваса
//завершаем канвас



function f(x){
    return x * x 
}

canvas.fillStyle = "blue"

var x0 = 0-oy
var y0 = f(x0)

canvas.beginPath()
canvas.moveTo(x0,y0)
for(i=0; i<=canv.width; i++){
var x = i-oy
var y = f(x)
canvas.lineTo(x+ox,oy-y)
}
canvas.stroke()
canvas.closePath()

рони · #2 (**permalink**) 16.08.2019, 00:17

Иса Мирзоев,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  canvas{
      border: 1px solid #000000
  }

  </style>

</head>

<body>
<canvas id="canv"></canvas>
<script>
 //график

//определяем канвас
//задаем размеры и цвета, ширину линий и шрифт
//задаем стартовые значения осей
//рисуем оси


var canv = document.getElementById("canv")
var canvas = canv.getContext("2d")

canv.width = 800
canv.height = 500
canvas.lineWidth = 2
canvas.font = "Georgia 10px"
canvas.strokeStyle = "red"

var oy=canv.width/2
var ox=canv.height/2


canvas.beginPath()
canvas.moveTo(oy,0)
canvas.lineTo(oy,canv.height)
canvas.moveTo(0,ox)
canvas.lineTo(canv.width,ox)
canvas.stroke()
canvas.closePath()


//определяем длину шага в пунктах, количество шагов, цвет и толщину
//через 2 цикла задаем описание цифр, указав связь i с шагом, перезадавая количество шагов для разных осей


var step = 50
var steps = canv.width/step
canv.lineWidth = 1
canvas.fillStyle = "black"
canvas.lineWidth = 1

for(i=0; i<steps; i++){
canvas.fillText((i*step)-oy,i*step+2,ox+10)
}

steps = canv.height/step

for(i=0; i<=steps; i++){
canvas.fillText(ox-(i*step),oy+2,i*step+10)
}



canvas.strokeStyle = "gold"
canvas.strokeText("Y",oy-12,12)
canvas.strokeText("X",canv.width-8,ox-8)


//пишем будущую функцию и цвет графика
//задаем стартовые точки
//начинаем канвас со стартовыми точками
//проходимся циклом, где переводим новые точки в старые и указываем конечные данные канваса
//завершаем канвас



function f(x){
    return x * x
}

canvas.fillStyle = "blue"

var x0 = 0;
var y0 = ox - f(-oy);

canvas.beginPath()
canvas.moveTo(x0,y0);
for(i=1; i<=canv.width; i++){
var x = i;
var y = ox - f(i - oy);
canvas.lineTo(x, y);
}
canvas.stroke()
canvas.closePath()

</script>
</body>
</html>

Иса Мирзоев · #3 (**permalink**) 16.08.2019, 01:41

Сообщение от рони

Иса Мирзоев,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  canvas{
      border: 1px solid #000000
  }

  </style>

</head>

<body>
<canvas id="canv"></canvas>
<script>
 //график

//определяем канвас
//задаем размеры и цвета, ширину линий и шрифт
//задаем стартовые значения осей
//рисуем оси


var canv = document.getElementById("canv")
var canvas = canv.getContext("2d")

canv.width = 800
canv.height = 500
canvas.lineWidth = 2
canvas.font = "Georgia 10px"
canvas.strokeStyle = "red"

var oy=canv.width/2
var ox=canv.height/2


canvas.beginPath()
canvas.moveTo(oy,0)
canvas.lineTo(oy,canv.height)
canvas.moveTo(0,ox)
canvas.lineTo(canv.width,ox)
canvas.stroke()
canvas.closePath()


//определяем длину шага в пунктах, количество шагов, цвет и толщину
//через 2 цикла задаем описание цифр, указав связь i с шагом, перезадавая количество шагов для разных осей


var step = 50
var steps = canv.width/step
canv.lineWidth = 1
canvas.fillStyle = "black"
canvas.lineWidth = 1

for(i=0; i<steps; i++){
canvas.fillText((i*step)-oy,i*step+2,ox+10)
}

steps = canv.height/step

for(i=0; i<=steps; i++){
canvas.fillText(ox-(i*step),oy+2,i*step+10)
}



canvas.strokeStyle = "gold"
canvas.strokeText("Y",oy-12,12)
canvas.strokeText("X",canv.width-8,ox-8)


//пишем будущую функцию и цвет графика
//задаем стартовые точки
//начинаем канвас со стартовыми точками
//проходимся циклом, где переводим новые точки в старые и указываем конечные данные канваса
//завершаем канвас



function f(x){
    return x * x
}

canvas.fillStyle = "blue"

var x0 = 0;
var y0 = ox - f(-oy);

canvas.beginPath()
canvas.moveTo(x0,y0);
for(i=1; i<=canv.width; i++){
var x = i;
var y = ox - f(i - oy);
canvas.lineTo(x, y);
}
canvas.stroke()
canvas.closePath()

</script>
</body>
</html>

Благодарю. Там гораздо проще) А вычитания в y0 у нас из-за того, что шкала позиций "канваса" (которая с левого верхнего угла считается) и график (в котором "ноль" - по центру), имеют собственно эту разницу в точке отсчета, а ее надо выровнять?

Форум

Справочник

Discord чат

Курсы javascript