`
128kj
  • 浏览: 607938 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas贝塞尔曲线动画

html5htmlJavaScript浏览器canvas 
阅读更多
点击这里可以查看动画效果：
http://www.108js.com/article/article3/zip1/BezierAnim.html
欢迎访问博主的网站：http://www.108js.com

效果图：

代码：
<html>
  <head>
   <meta charset="gbk">
   <title>贝塞尔曲线动画</title>
  </head>
<body>
   <canvas id = "myCanvas" width="300" height="200">你的浏览器不支持canvas</canvas>
   <script>

    window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame ||  
     window.webkitRequestAnimationFrame ||  
        window.mozRequestAnimationFrame ||  
          window.oRequestAnimationFrame ||  
         window.msRequestAnimationFrame || 
           function(callback) { 
             window.setTimeout(callback, 1000 / 60); 
           }; 
      })(); 

    var canvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");
             
    var  animpts=[];
    var  deltas=[];
    var  gradient;//线性渐变
    var w=canvas.width;
    var h=canvas.height;
  
    function main() { 
      context.clearRect(0, 0, w,h); 
      step(w,h);
      render(w, h, context);
      requestAnimFrame(function() { 
        main(); 
     }); 
   } 

     function init() {
         gradient = context.createLinearGradient(0,0,200,200);
         gradient.addColorStop(0,'red');
         gradient.addColorStop(1,'yellow');
     
        context.fillStyle = gradient;
        context.strokeStyle="blue";
        context.lineWidth=10;
        reset(w,h);
        render(w, h, context)
        main();
    }

function  animate(pts, deltas, index, limit) {
        var  newpt = pts[index] + deltas[index];
        if (newpt <= 0) {
            newpt = -newpt;
            deltas[index] =   (Math.random() * 4 + 2);
        } else if (newpt >=  limit) {
            newpt = 2 * limit - newpt;
            deltas[index] = - (Math.random() * 4 + 2);
        }
        pts[index] = newpt;
    }
  
    function reset(w,h) {
        for (var i = 0; i < 12; i += 2) {
            animpts[i + 0] =  (Math.random() * w);
            animpts[i + 1] =  (Math.random() * h);
             deltas[i + 0] =  (Math.random() * 6.0 + 4.0);
             deltas[i + 1] =  (Math.random() * 6.0 + 4.0);
            if (animpts[i + 0] > w / 2) {
                deltas[i + 0] = -deltas[i + 0];
            }
            if (animpts[i + 1] > h / 2) {
                deltas[i + 1] = -deltas[i + 1];
            }
        }
        gradient = context.createLinearGradient(0,0,w*0.7,h*0.7);
         gradient.addColorStop(0,'red');
         gradient.addColorStop(1,'yellow');
    }

    function step(w, h) {
        for (var i = 0; i < 12; i += 2) {
            animate(animpts, deltas, i + 0, w);
            animate(animpts, deltas, i + 1, h);
        }
    }


    function render(w, h, context) {
        var ctrlpts = animpts;
        var len = ctrlpts.length;
        var prevx = ctrlpts[len - 2];
        var prevy = ctrlpts[len - 1];
        var   curx = ctrlpts[0];
        var   cury = ctrlpts[1];
        var  midx = (curx + prevx) / 2;
        var   midy = (cury + prevy) / 2;
        context.beginPath();
        context.moveTo(midx, midy);
        for (var i = 2; i <= ctrlpts.length; i += 2) {
            var x1 = (midx + curx) / 2;
            var y1 = (midy + cury) / 2;
            prevx = curx;
            prevy = cury;
            if (i < ctrlpts.length) {
                curx = ctrlpts[i + 0];
                cury = ctrlpts[i + 1];
            } else {
                curx = ctrlpts[0];
                cury = ctrlpts[1];
            }
            midx = (curx + prevx) / 2;
            midy = (cury + prevy) / 2;
            var  x2 = (prevx + midx) / 2;
            var  y2 = (prevy + midy) / 2;
            context.bezierCurveTo(x1, y1, x2, y2, midx, midy);
        }
        context.closePath();
        context.stroke();
        context.fill();
    }

  window.onload=init;
   
  </script></boey></html>
   热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
  • 大小: 5.6 KB
0
顶
0
踩
分享到：
| javascript for语句最佳实践
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics