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);

canvas 实现圆环效果的更多相关文章

  1. canvas/CSS仪表盘效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 第165天:canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  3. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  4. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  5. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  6. canvas扩散圆环

    最近看了很多牛的动画,想想自己的canvas的确很菜. 公式在那里,但是不是太会套.找demo发现都是很难的 于是找了个简单的效果 圆环从中间扩散的效果 关键是 globalCompositeOper ...

  7. 微信小程序里自定义组件,canvas组件没有效果

    methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...

  8. canvas弹动效果

    弹动效果,用物体与目标的距离乘上系数再累加至速度上,让物体呈加速度运动,再让速度乘与摩擦力系数,让物体最终停止运动 代码如下所示 var canvas = document.getElementByI ...

  9. 用Canvas制作剪纸效果

    在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...

随机推荐

  1. 纯css3棋盘图案背景以及45度斜纹背景

    css代码  .stripes {     height: 250px;     width: 375px;     float: left;          margin: 10px;      ...

  2. vue中使用全局函数

    方法一: 在mian.js中写入函数: Vue.prototype.bb = function () {        alert('OK'); } 然后在任何组件中都可以调用: this.bb() ...

  3. 调用高德地图API(热力图)详解

    具体脚本语言如下: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  4. 数据存储 共享参数 SharedPreferences

    先要声明文件名和操作方式,第一个参数:文件名为"share.xml",第二个参数:私有模式SharedPreferences shared = getSharedPreferenc ...

  5. ASP.Net MVC 中EF实体的属性取消映射数据库、自定义名称

    例如:数据库中一个字段名称为CompanyId 自定义实体数据名称 [Column("CompanyId")] public int Id{ get; set; } 这样就可以使用 ...

  6. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  7. Python: PySide(PyQt)QMessageBox按钮显示中文

    习惯了Delphi.c#调用系统MessageBox本地化显示,待用PySide调用时,Qt原生提示对话框,默认以英文显示. 如何本地化呢? 参考些资料,加以摸索,实现所需效果.并可根据此思路,设计自 ...

  8. django具体操作(七)

    新增组件 使用 python manage.py startapp新建一个app,并且在settings中注册,添加stark.apps.StarkConfig, 然后在stark的apps中添加re ...

  9. Nginx中超时时间配置(转)

    本文介绍 Nginx 的 超时(timeout)配置.分享给大家,具体如下: Nginx 处理的每个请求均有相应的超时设置.如果做好这些超时时间的限定,判定超时后资源被释放,用来处理其他的请求,以此提 ...

  10. 32位Server2008添加IIS