zoukankan      html  css  js  c++  java
  • canvas 实现圆环效果

    var race = document.getElementById('race');
    var cxt = race.getContext('2d');

    var ang = 0;
    var speed = 1;
    var sAng = 0;

    function draw() {
    cxt.save();

    cxt.translate(300, 300);

    cxt.save();
    cxt.beginPath();
    cxt.fillStyle = '#CCA548';
    cxt.arc(0, 0, 220, 0, 360*Math.PI/180, false);
    cxt.fill();
    cxt.closePath();
    cxt.restore();

    cxt.save();
    cxt.beginPath();
    cxt.fillStyle = 'white';
    cxt.arc(0, 0, 200, 0, 360*Math.PI/180, false);
    cxt.fill();
    cxt.closePath();
    cxt.restore();

    cxt.save();
    cxt.rotate(ang*Math.PI/180);
    ang += speed;
    //speed += 1;
    cxt.fillStyle = '#CDC9A5';
    cxt.fillRect(210, -40, 40, 80);
    cxt.strokeRect(210, -40, 40, 80);

    cxt.fillStyle = 'white';
    cxt.fillRect(230, -20, 10, 10);
    cxt.fillRect(230, 10, 10, 10);

    cxt.save();
    cxt.translate(210, -20);
    cxt.fillStyle = '#000';
    cxt.beginPath();
    cxt.arc(0, 0,10, 0, 360*Math.PI/180, false);
    cxt.fill();
    cxt.closePath();

    cxt.fillStyle = 'white';
    cxt.beginPath();
    cxt.arc(0, 0, 2, 0, 360*Math.PI/180, false);
    cxt.fill();
    cxt.closePath();

    cxt.save();
    if(sAng > 360){
    sAng = 0;
    }
    cxt.rotate(sAng*Math.PI/180);
    sAng += 4;
    cxt.strokeStyle = 'white';
    cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2));
    cxt.restore();

    cxt.restore();

    cxt.save();
    cxt.translate(210, 20);
    cxt.fillStyle = '#000';
    cxt.beginPath();
    cxt.arc(0, 0,10, 0, 360*Math.PI/180, false);
    cxt.fill();
    cxt.closePath();

    cxt.save();
    cxt.rotate((sAng+45)*Math.PI/180);
    cxt.strokeStyle = 'white';
    cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2));
    cxt.restore();

    cxt.restore();

    cxt.beginPath();
    cxt.arc(210, 20, 2, 0, 360*Math.PI/180, false);
    cxt.fill();
    cxt.closePath();

    cxt.restore();

    cxt.restore();
    }

    //draw();

    function animate() {

    cxt.clearRect(0, 0, 600, 600);
    draw();

    requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

  • 相关阅读:
    开发和使用自定义服务器控件
    用户认证管理设计方案(转)
    用 @@ERROR 检测几条语句的成功
    在 ASP.NET 中支持数据库缓存相关性
    给新人程序员的八点建议(转)
    DataTable添加列
    各城市工资多少才等于北京5000元工资的生活?
    连续读取区块应用程序设置值
    VS2005 SP1发布,解决只能创建WebSite,无法创建Web Application项目的问题 (转)
    帮你免于失业的十大软件技术
  • 原文地址:https://www.cnblogs.com/liubu/p/7846934.html
Copyright © 2011-2022 走看看