首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript画布使用函数逐个绘制圆

JavaScript画布使用函数逐个绘制圆
EN

Stack Overflow用户
提问于 2019-03-14 20:11:24
回答 2查看 249关注 0票数 2

我的目标是检测我的函数在哪里首先穿过负边的X轴。为此,我首先检查所有范围,然后根据结果除以其中一条边的两个。我想把我所有的圆圈一一画出来。我第一次得到这样的东西:

然后我搜索并尝试了这个:

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>

(当我点击"solve f1“按钮时,会使用计算和绘制圆圈的dichotomie函数)

谢谢。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55162245

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档