html5 – 使用Canvas为填充圆圈设置动画

前端之家收集整理的这篇文章主要介绍了html5 – 使用Canvas为填充圆圈设置动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
基本上我希望能够使用画布填充圆圈,但它会以一定的百分比动画.
我只有圆圈填满了80%.

我的画布知识并不令人惊讶,这是我在photoshop中制作的图像,用于显示我想要的内容.

我希望圆圈开始为空,然后填充说圆圈的70%.
Canvas有可能,如果是这样吗?任何人都可以了解如何做到这一点?

这是我管理的一个小提琴

http://jsfiddle.net/6Vm67/

  1. var canvas = document.getElementById('Circle');
  2. var context = canvas.getContext('2d');
  3. var centerX = canvas.width / 2;
  4. var centerY = canvas.height / 2;
  5. var radius = 80;
  6.  
  7. context.beginPath();
  8. context.arc(centerX,centerY,radius,2 * Math.PI,false);
  9. context.fillStyle = '#13a8a4';
  10. context.fill();
  11. context.lineWidth = 10;
  12. context.strokeStyle = '#ffffff';
  13. context.stroke();

任何帮助都将受到大力赞赏

解决方法

剪裁区域使这非常容易.你所要做的就是制作一个圆形剪裁区域,然后填充一个大小的矩形,以获得一个值得填充的“部分圆”.这是一个例子:
  1. var canvas = document.getElementById('Circle');
  2. var context = canvas.getContext('2d');
  3. var centerX = canvas.width / 2;
  4. var centerY = canvas.height / 2;
  5. var radius = 80;
  6.  
  7. var full = radius*2;
  8. var amount = 0;
  9. var amountToIncrease = 10;
  10.  
  11. function draw() {
  12. context.save();
  13. context.beginPath();
  14. context.arc(centerX,false);
  15. context.clip(); // Make a clipping region out of this path
  16. // instead of filling the arc,we fill a variable-sized rectangle
  17. // that is clipped to the arc
  18. context.fillStyle = '#13a8a4';
  19. // We want the rectangle to get progressively taller starting from the bottom
  20. // There are two ways to do this:
  21. // 1. Change the Y value and height every time
  22. // 2. Using a negative height
  23. // I'm lazy,so we're going with 2
  24. context.fillRect(centerX - radius,centerY + radius,radius * 2,-amount);
  25. context.restore(); // reset clipping region
  26.  
  27. context.beginPath();
  28. context.arc(centerX,false);
  29. context.lineWidth = 10;
  30. context.strokeStyle = '#000000';
  31. context.stroke();
  32.  
  33. // Every time,raise amount by some value:
  34. amount += amountToIncrease;
  35. if (amount > full) amount = 0; // restart
  36. }
  37.  
  38. draw();
  39. // Every second we'll fill more;
  40. setInterval(draw,1000);

http://jsfiddle.net/simonsarris/pby9r/

猜你在找的HTML5相关文章