动画画布圆圈以在加载时绘制

好的你好.

我决定开始使用HTML canvas来完成我的小项目.

还没有真正的开始.我只是学习Canvas的基础知识,我想要动画一个圆圈

<!DOCTYPE html>
<html>
 <head>
  <Meta charset="UTF-8">
  <title>title</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: #222;
      }

     </style>
  <link rel="stylesheet" href="style.css" type="text/css">
 </head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>

    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 3.2 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x,y,radius,startAngle,endAngle,counterClockwise);
      context.lineWidth = 15;
      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
 </body>
</html>

这是我努力实现的一个小提琴http://jsfiddle.net/oskar/Aapn8/.
我不会对“反弹”效果感到困惑.

但我基本上希望它在页面加载时绘制并停在所需的弧形角度
这是迄今为止我创造的小提琴.

http://jsfiddle.net/skerwin/uhVj6/

谢谢

解决方法

Live Demo

// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();



var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 var radius = 75;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI / 2;

 context.lineWidth = 10;
 context.strokeStyle = '#ad2323';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 10;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0,canvas.width,canvas.height);
     context.beginPath();
     context.arc(x,-(quart),((circ) * current) - quart,false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }

 animate();

基本上我使用了你发布的演示链接中的相同公式.然后我添加了一个动画函数,调用时会更新圆圈,直到达到所需的结束百分比.

动画在requestAnimationFrame不断调用,这是使用canvas进行任何动画的首选方式.每次调用动画时,当前百分比增加1,然后用于重绘弧.

原文链接：https://www.f2er.com/jquery/181062.html

动画画布圆圈以在加载时绘制

解决方法

猜你在找的jQuery相关文章