Иса Мирзоев,
<!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>
|