當函數在document.ready中時執行函數onclick

Question

我對Javascript很新，所以我希望得到一些幫助。我一直在玩使用畫布和JavaScript動畫圖形。我知道，當頁面加載時，它會將圖表填充到預定的百分比。

我也有一些按鈕有onclick他們，目的是點擊這些按鈕再次執行動畫功能，但具有不同的百分比。然而，點擊它們並不是那麼回事。

你可以給我這個任何幫助將是偉大的。

代碼：

window.onload = function(){ 
    //canvas initialization 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    //dimensions 
    var W = canvas.width; 
    var H = canvas.height; 
    //Variables 
    var degrees = 0; 
    var new_degrees = 0; 
    var difference = 0; 
    var color = "#c70505"; //green looks better to me 
    var bgcolor = "#222"; 
    var text; 
    var animation_loop, redraw_loop; 

    function init() 
    { 
     //Clear the canvas everytime a chart is drawn 
     ctx.clearRect(0, 0, W, H); 

     //Background 360 degree arc 
     ctx.beginPath(); 
     ctx.strokeStyle = bgcolor; 
     ctx.lineWidth = 30; 
     ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now 
     ctx.stroke(); 

     //gauge will be a simple arc 
     //Angle in radians = angle in degrees * PI/180 
     var radians = degrees * Math.PI/180; 
     ctx.beginPath(); 
     ctx.strokeStyle = color; 
     ctx.lineWidth = 30; 
     //The arc starts from the rightmost end. If we deduct 90 degrees from the angles 
     //the arc will start from the topmost end 
     ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
     //you can see the arc now 
     ctx.stroke(); 

     //Lets add the text 
     ctx.fillStyle = color; 
     ctx.font = "50px bebas"; 
     text = Math.floor(degrees/360*100) + "%"; 
     //Lets center the text 
     //deducting half of text width from position x 
     text_width = ctx.measureText(text).width; 
     //adding manual value to position y since the height of the text cannot 
     //be measured easily. There are hacks but we will keep it manual for now. 
     ctx.fillText(text, W/2 - text_width/2, H/2 + 15); 
    } 

    function draw(percent) 
    { 
     //Cancel any movement animation if a new chart is requested 
     if(typeof animation_loop != undefined) clearInterval(animation_loop); 

     //random degree from 0 to 360 
     new_degrees = percent 
     difference = new_degrees - degrees; 
     //This will animate the gauge to new positions 
     //The animation will take 1 second 
     //time for each frame is 1sec/difference in degrees 
     animation_loop = setInterval(animate_to, 1000/difference); 
    } 

    //function to make the chart move to new degrees 
    function animate_to() 
    { 
     //clear animation loop if degrees reaches to new_degrees 
     if(degrees == new_degrees) 
      clearInterval(animation_loop); 

     if(degrees < new_degrees) 
      degrees++; 
     else 
      degrees--; 

     init(); 
    } 

     draw(100); 

} 

<canvas id="canvas" width="300" height="300"></canvas> 


<button onclick="draw(360)">100%</button> 
<button onclick="draw(270)">75%</button> 

Answer 1

的draw功能超出了範圍，因爲一旦你分配給window.onload完成執行匿名函數。如果您在全局範圍內聲明函數，則可以在任何地方調用它們。這是一個工作fiddle。

Answer 2

試試我的更新：

<script> 
//canvas initialization 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
//dimensions 
var W = canvas.width; 
var H = canvas.height; 
//Variables 
var degrees = 0; 
var new_degrees = 0; 
var difference = 0; 
var color = "#c70505"; //green looks better to me 
var bgcolor = "#222"; 
var text; 
var animation_loop, redraw_loop; 

function init() 
{ 
    //Clear the canvas everytime a chart is drawn 
    ctx.clearRect(0, 0, W, H); 

    //Background 360 degree arc 
    ctx.beginPath(); 
    ctx.strokeStyle = bgcolor; 
    ctx.lineWidth = 30; 
    ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now 
    ctx.stroke(); 

    //gauge will be a simple arc 
    //Angle in radians = angle in degrees * PI/180 
    var radians = degrees * Math.PI/180; 
    ctx.beginPath(); 
    ctx.strokeStyle = color; 
    ctx.lineWidth = 30; 
    //The arc starts from the rightmost end. If we deduct 90 degrees from the angles 
    //the arc will start from the topmost end 
    ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
    //you can see the arc now 
    ctx.stroke(); 

    //Lets add the text 
    ctx.fillStyle = color; 
    ctx.font = "50px bebas"; 
    text = Math.floor(degrees/360*100) + "%"; 
    //Lets center the text 
    //deducting half of text width from position x 
    text_width = ctx.measureText(text).width; 
    //adding manual value to position y since the height of the text cannot 
    //be measured easily. There are hacks but we will keep it manual for now. 
    ctx.fillText(text, W/2 - text_width/2, H/2 + 15); 
} 

function draw(percent) 
{ 
    //Cancel any movement animation if a new chart is requested 
    if(typeof animation_loop != undefined) clearInterval(animation_loop); 

    //random degree from 0 to 360 
    new_degrees = percent 
    difference = new_degrees - degrees; 
    //This will animate the gauge to new positions 
    //The animation will take 1 second 
    //time for each frame is 1sec/difference in degrees 
    animation_loop = setInterval(animate_to, 1000/difference); 
} 

//function to make the chart move to new degrees 
function animate_to() 
{ 
    //clear animation loop if degrees reaches to new_degrees 
    if(degrees == new_degrees) 
     clearInterval(animation_loop); 

    if(degrees < new_degrees) 
     degrees++; 
    else 
     degrees--; 

    init(); 
} 
draw(100); 
</script> 

<canvas id="canvas" width="300" height="300"></canvas> 
<button onclick="draw(360)">100%</button> 
<button onclick="draw(270)">75%</button>