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
| function fun(x)
{
var z;
z = x < -1 ? x : ( x < 1 ? -1 : ( x < 2 ? -x : 2 * x - 6 ) );
return z;
}
function graphic( A, B, H, Delta, Size ) {
// параметры рисунка: края отрезка, шаг по x, центр графика, масштаб
var a = ( A !== undefined ) ? A : -7;
var b = ( B !== undefined ) ? B : 7;
var h = ( H !== undefined ) ? H : 0.1;
var delta = ( Delta !== undefined ) ? Delta : 300;
var size = ( Size !== undefined ) ? Size : 20;
// оси
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1;
ctx.moveTo(0, delta);
ctx.lineTo( 2 * delta, delta);
ctx.moveTo(delta, 0);
ctx.lineTo( delta, 2 * delta );
ctx.stroke();
// сетка
ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1;
var bias = 5;
ctx.font = "italic 10pt Arial";
for ( var i = -9; i<= 9; i++ ) {
ctx.moveTo( i * size + delta, delta-bias ); ctx.lineTo( i * size + delta, delta+bias );
ctx.moveTo( delta-bias, i * size + delta ); ctx.lineTo( delta+bias, i * size + delta );
if ( i!=0 ) { ctx.fillText( i, i * size + delta - bias, delta + 4 * bias ); }
if ( i!=0 ) { ctx.fillText( i, delta + 2 * bias, -i * size + delta + bias ); }
}
ctx.fillText( 0, delta + bias, delta + 4 * bias );
ctx.stroke();
// график
ctx.beginPath();
var x = a, y = fun( x );
var XX = x * size + delta, YY = -y * size + delta;
ctx.moveTo(XX,YY);
while ( x <= b ) {
y = fun( x );
XX = x * size + delta; YY = -y * size + delta;
ctx.lineTo( XX, YY );
x = x + h;
}
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 2;
ctx.stroke();
}
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
graphic( -5, 5, 0.1, 300, 30 ); |
(
