2

我对 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>
4

2 回答 2

0

draw一旦您分配给的匿名函数window.onload完成执行，该函数就会超出范围。如果您改为在全局范围内声明函数，则可以在任何地方调用它们。这是一个工作小提琴。

于 2012-10-27T20:00:00.757 回答
0

试试我的更新：

<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>
于 2012-10-27T20:03:05.917 回答