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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (30)

我的目标是检测我的函数在负面一侧首先穿过Axes X. 为此,我首先从所有范围检查,然后根据结果在一侧中除以2。我想在我的所有圈子中逐一画画。我第一次得到这样的东西:

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

window.requestAnimationFrame(drawDicho(a,b));

而且我认为它会单独绘制每个圆圈。但相反,它只在坐标(0,0)上绘制圆圈。如果我再次点击,它会再次使用它。

我已经尝试过window.setInterval(...)但也没有发生任何事情。

我可以恢复正确的值,但我想逐个显示圆圈,而不是同时显示所有圆圈。有没有人有想法?也许我把代码放在错误的地方,我不知道..

@UPDATE完整代码:

    <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”时使用计算和绘制圆圈的功能)

谢谢。

提问于
用户回答回答于

window.requestAnimationFrame 期望函数引用作为参数,这样可以在浏览器完成渲染后立即调用给定的函数,但不能超过60Hz。

如下:

while (…) {
  …
  window.requestAnimationFrame(drawDicho(a,b));
  …
}

你是drawDicho(a,b)while循环中立即调用并将返回值赋值给requestAnimationFrame未定义的。

至少我认为你需要的是一个像这样的动画循环:

const DELAY = 1000;

let 
  last = new Date().getTime(),
  circles = [
    [10,10],
    [100, 100],
    [10, 100]
  ]
;

//replace while () {} with the loop below,
//this way the execution is scheduled
(function loop () {
  const 
    now = new Date().getTime(),
    delta = now - last;

  if (delta >= DELAY && circles.length > 0) {
    drawCircle(...circles.shift());
    last = now;
  }


  window.requestAnimationFrame(loop);

})();

这种方式loop会经常被调用。while循环不是动画循环,代码会立即调用。动画循环以某个“帧速率”运行,而while循环则没有。

热门问答

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

使用独立H5接入人脸核身,在微信浏览器拍摄视频按钮无法点击?

旺仔小小鹿

社区 · 运营 (已认证)

Less is more
推荐

使用iframe会有问题 ,微信有限制,不允许使用iframe调用jsapi摄像头 ,微信里,不能用iframe

ios应该都不行的,安卓需要看是什么浏览器。

云服务器中ping不可达,请教一下如何恢复?

推荐已采纳
本地主机 ping 不通实例可能由以下问题导致: 目标服务器的设置不正确 域名没有正确解析 链路故障 在确保本地网络正常的前提下(即您可以正常 ping 通其他网站),可根据以下操作进行排查: 检查实例是否配置公网 IP 检查安全组设置 检查系统设置 检查域名是否备案 检查域名解...... 展开详请

为什么加固之后生成四个文件?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

选择最后一个_legu_aligned_signed.apk 文件,这个是加固并已重签名的文件。

COS Javascript SDK 为何没有 getService 方法?

因为 getService 请求的是 service.cos.myqcloud.com 或 cos.<Region>.myqcloud.com 域名,前端直接请求会导致跨域问题。 前端 js sdk 直接请求 bucket/object 相关的接口,虽然也会跨域,但你可以在 你...... 展开详请

iot设备通过mqtt协议连接,没有办法设置clientid?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐

物联网接入层有设备互踢的逻辑,如果是用同一个设备 ID 在不同地方登录,会导致其中一方被另一方踢下线。因此发现设备一直上下线时,需要确认是否有不同的人或者多线程在使用同一个设备 ID 执行登录操作。

所属标签

扫码关注云+社区

领取腾讯云代金券