빌딩 서클 계기 게이지

Question

누군가가 원형 계기판으로 나를 도울 수 있는지 궁금 해서요. 저는 다른 예에서 일부 코드를 가져 왔고 여기에서 작동하도록 할 수 있는지 알아보기 위해 프로토 타입을 쓰고 있습니다.

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); 
    } 

}() 

아래 자바 스크립트

코드와

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

실행을 클릭 나는 수준의 문제가있을 것 같다 ??? drawCircle 기능에

어떤 도움

Answer 1

변경이 두 라인 : 그래서 우리는 우리가 것을 사용중인 추가 할 필요가 0과 1 사이

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

귀하의 num는 값 것 같다 360도 여기에서 PI/180을 사용하여 변환하십시오.

다른 문제는 clearRect이 충분히 멀리 확장되지 않아서 오른쪽의 호의 일부가 비어 있지 않은 것입니다.

팁 : 좀 더 사실적으로 보이게하려면 rms이 새 값일 때만 rms을 업데이트하고 각 프레임에 대해 작은 값을 빼는 것이 아니라면.

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