1

我正在尝试制作一个以零半径开始并最终变为全半径的圆形笔划动画。

我正在尝试使用 HTML5 Canvas 和 jQuery 来实现。圆圈被绘制一次，但没有动画。

剧本：

function calc(myVal) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var radius = 70;

    ctx.beginPath();
    ctx.arc(140, 140, 100, myVal * Math.PI, 0, false);
    ctx.lineWidth = 10;
    ctx.stroke();
};
$(document).ready(function() {
    var count = 0;
    var parsedCount;
    function go(){  
        if (count <= 200) {
            parsedCount = count*.01
            $('#counter').html('<p>' + parsedCount + '</p>');
            calc(parsedCount);
            count++;
        }
    }
    setInterval(go, 100)
});

的HTML：

    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000">

    </canvas>
    <div id="counter" class="" style="height: 100px; width: 100px; border: 1px solid #000">

    </div>
4

2 回答 2

3

鉴于您提供的角度，您只是在错误的方向上绘制弧线。

做

ctx.arc(140, 140, 100, myVal * Math.PI, 0, true);

代替

ctx.arc(140, 140, 100, myVal * Math.PI, 0, false);
于 2012-08-21T18:02:08.830 回答
1

您的代码中有一些问题。

  1. 您不应该每次都实例化上下文。
  2. 你永远不会清理画布。
  3. 你没有画出你想要的东西，就像@dystroy 提到的那样

http://jsfiddle.net/lechevalierd3on/REqy6/

1. 将 canvas 和 ctx var 保持在“更高的范围”内。将它们放在全局中也不是一个好习惯。最好的办法是将所有东西包装成一个对象。

function Animation() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  this.draw = function(val) {
   // content of calc
  }

}

var animation = new Animation();
$(function(){
  // what needs to be compute at ready
  // ...

  // setInterval a function that make the call to Animation.draw();

})

2. 在这种情况下，您看不到它，因为您在彼此之上绘制弧线。但你实际上可以猜到混叠。

ctx.clearRect(0,0,canvas.width, canvas.height);
于 2012-08-21T18:05:22.183 回答