Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.08.2019, 22:57
Интересующийся
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 25

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

//график

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


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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,518

Иса Мирзоев,
<!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
Интересующийся
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 25

Сообщение от рони Посмотреть сообщение
Иса Мирзоев,
<!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 у нас из-за того, что шкала позиций "канваса" (которая с левого верхнего угла считается) и график (в котором "ноль" - по центру), имеют собственно эту разницу в точке отсчета, а ее надо выровнять?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обмануть КАНВАС. clecar Общие вопросы Javascript 29 25.10.2016 01:02
Канвас не залил область vadim_ck Элементы интерфейса 0 02.03.2016 16:49
Канвас, пересечение двух квадратов scorpion95 Общие вопросы Javascript 0 27.12.2015 15:22
Как объединить канвас mervin Элементы интерфейса 12 12.08.2015 16:45
2д игра канвас l-liava-l Оффтопик 6 22.06.2014 09:44