0

我想知道是否有人可以帮助我使用圆形仪表我已经从另一个示例中获取了一些代码，我只是在做原型，看看我是否可以让它工作这里是一个工作示例。

http://jsbin.com/ixuyid/28/edit

单击使用 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);
  }

}()

好像水平有问题？？？

任何帮助

4

1 回答 1

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;

在你的processor.onaudioprocessafter vars 里面：

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

修改： http ://jsbin.com/ixuyid/29/edit

于 2013-06-13T21:02:57.830 回答