Question

我想知道是否有人可以用圆圈仪表来帮助我我从一个不同的例子中获取了一些代码，我只是在原型上查看是否可以让它在这里工作是一个有效的例子。

点击使用javascript运行

以下代码

var context;

    canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');

    //use a reusable function
    function drawCircle(num){
      console.log(num);
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 0 * Math.PI;
      var endAngle = num * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 5;

      // line color
      context.strokeStyle = 'black';
      context.stroke();

    }

    drawCircle();

      var num = 1;
      setInterval(function(){

      },1000);

+function(){

  var ctx = new webkitAudioContext()
    , url = '//kevincennis.com/sound/loudpipes.mp3'  
    , audio = new Audio(url)
    // 2048 sample buffer, 1 channel in, 1 channel out  
    , processor = ctx.createJavaScriptNode(2048, 1, 1)
    , meter = document.getElementById('meter')
    , source

  audio.addEventListener('canplaythrough', function(){
    source = ctx.createMediaElementSource(audio)
    source.connect(processor)
    source.connect(ctx.destination)
    processor.connect(ctx.destination)
    audio.play()
  }, false);

  // loop through PCM data and calculate average
  // volume for a given 2048 sample buffer
  processor.onaudioprocess = function(evt){
    var input = evt.inputBuffer.getChannelData(0)
      , len = input.length   
      , total = i = 0
      , rms
    while ( i < len ) total += Math.abs( input[i++] )
    rms = Math.sqrt( total / len )
    meter.style.width = ( rms * 100 ) + '%';
    context.clearRect(100,50,200,200);
    drawCircle(rms);
  }

}()

我似乎遇到了水平问题???

任何帮助

Answer 1

更改drawCircle功能中的这两行：

var startAngle = 0; //multiplying with 0 will result in 0
var endAngle = 360 * num * Math.PI / 180;

您的num似乎是介于0和1之间的值，因此我们需要添加我们使用的值，此处为360度，然后使用PI / 180进行转换。

另一个问题是clearRect没有延伸得足够远，所以它将部分弧线保持在右侧。

提示：为了使其看起来更逼真，只有当新rms更高时，才能更新rms，如果不是只为每一帧减去一个小值。

例如：

//global scope
var oldRMS = 0;

在vars后的processor.onaudioprocess内：

if (rms > oldRMS) oldRMS = rms;

meter.style.width = ( oldRMS * 100 ) + '%';

context.clearRect(100,50,canvas.width,canvas.height);
drawCircle(oldRMS);

oldRMS -= 0.04; //speed of fallback

Modifcations：
http://jsbin.com/ixuyid/29/edit

建筑圈计量表

1 个答案: