Моя цель - определить, где моя функция сначала пересекает оси X с отрицательной стороны. Для этого я сначала проверяю все диапазоны, а затем делю на две в одной из сторон, в зависимости от результата.
Я хотел бы нарисовать 1 на 1 все мои круги. В первый раз я получил что-то вроде этого:
а потом я искал и пробовал это:
window.requestAnimationFrame(drawDicho(a,b));
И я думал, что каждый круг будет нарисован индивидуально. Но вместо этого он только рисует круг по координатам (0,0). Если я нажму еще раз, он снова начнет рисовать.
¨
Я пробовал window.setInterval (...), но ничего не произошло.
Я могу восстановить правильное значение, но я бы хотел показывать круги по одному, а не все одновременно.
У кого-нибудь есть идея? Возможно я помещаю код в неправильное место, я не знаю ..
@ ОБНОВЛЕНИЕ ПОЛНОГО КОДА:
<script type="text/javascript">
window.onload = function(){
var canvas = $('myCanvas');
if(!canvas){
alert("Impossible to recover canvas");
return;
}
var context = canvas.getContext('2d');
if(!context){
alert("Impossible dto recover canvas context");
return;
}
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.fillRect(0, 0, 500, 500);
context.strokeStyle = 'rgba(0, 0, 0, 1)';
var width = canvas.width;
var height = canvas.height;
//draw axis Y
context.beginPath();
context.moveTo(width/2, 0);
context.lineTo(width/2, height);
context.closePath();
context.stroke();
//draw axis X
context.beginPath();
context.moveTo(0, height/2);
context.lineTo(width, height/2);
context.closePath();
context.stroke();
}
function function1(x){
return Math.sin(x)-(x/13);
}
function function2(x){
return x/(1-Math.pow(x, 2));
}
function draw(func){
var canvas = $('myCanvas');
var context = canvas.getContext('2d');
var dx = canvas.width;
var dy = canvas.height;
var scale = dx/40; // echelle (nb pixels between x=0 et x=1)
var x0 = dx/2;
var y0 = dy/2;
var iMax = 20;
var x, y;
var iMin = -20;
context.translate(x0,y0);
context.scale(1, -1);
context.strokeStyle = 'rgba(255, 0, 0, 1)';
context.beginPath();
context.arc(-100, 0, 5, 0, 2*Math.PI, false);
context.arc(100, 0, 5, 0, 2*Math.PI, false);
for(i = -100; i<=100; i=i+0.01){
x=i*4;
y = scale * func(x/scale);
context.lineTo(x, y);
}
context.closePath();
context.stroke();
}
function drawF1(){
draw(function1);
}
function drawF2(){
draw(function2);
}
function drawDicho(a, b){
var canvas = $('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(a, 0, 5, 0, 2*Math.PI, false);
context.arc(b, 0, 5, 0, 2*Math.PI, false);
context.closePath();
context.stroke();
}
function dichotomie(func){
var a = -100;
var b = 100;
var fa = func(a);
var fb = func(b);
var delta = 0.01;
while(Math.abs(b-a) > delta){
//drawDicho(a,b);
var m = (a+b)/2;
var fm = func(m);
if(fm * fa <= 0){
b = m;
fb = fm;
}
else{
a = m;
fa = fm;
}
window.requestAnimationFrame(drawDicho(a,b));
}
if(fa * fb <= 0){
return m.toFixed(3);
}
else{
return 'no 0';
}
}
function $(id){
return document.getElementById(id);
}
function solvef1()
{
var result = dichotomie(function1);
alert(result);
}
function solvef2(){
var result = dichotomie(function2);
alert(result);
}
</script>
</head>
<body style="background-color:grey">
<p>
<label>draw fonction: </label>
<input type="button" name="function1" value="fonction 1" id="drawF1" onclick="drawF1()">
<input type="button" name="function2" value="fonction 2" id="drawF2" onclick="drawF2()">
<input type="button" name="solvef1" value="solvef1" id="solvef1" onclick="solvef1()">
<input type="button" name="solvef2" value="solvef2" id="solvef2" onclick="solvef2()">
</p>
<br>
<canvas id="myCanvas" width="500" height="500">
Message bla bla bla
</canvas>
</body>
(функция dichotomie, которая вычисляет и рисует круги, используется, когда я нажимаю на кнопку "решить f1")
Спасибо.