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. 基本数据类型(dict)

    05. 基本数据类型(dict)内容:1. 字典的简单介绍2. 字典增删改查和其他操作3. 字典的嵌套⼀. 字典的简单介绍字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对 ...

  2. enlarge your dataset

    列举常见的几种数据集增强方法: 1.flip  翻折(左右,上下) # NumPy.'img' = A single image. flip_1 = np.fliplr(img) # TensorFl ...

  3. js五种继承优缺点

    //1.原型继承 //缺点: 当父级的属性有引用类型的时候,任意一个实例修改了这个属性,其他实例都会受影响 // 1)基本类型:Number Boolean String undefined null ...

  4. linux详解sudoers

    sudo使用 Linux是多用户多任务的操作系统, 共享该系统的用户往往不只一个.出于安全性考虑, 有必要通过useradd创建一些非root用户, 只让它们拥有不完全的权限; 如有必要,再来提升权限 ...

  5. Aspose.words一 DOM结构

    2.文档对象模型概述 2.1 DOM介绍 Aspose.Words的文档对象模型(以下简称DOM)是一个Word文档在内存中的映射,Aspose.Words的DOM可以编程读取.操作和修改Word文档 ...

  6. 因为要生成的折线数量是不定的 ,所以需要echarts 动态的为option中的Series添加数据

    series:function(){ var serie=[]; var aa = zhonglei[0].split(","); for( var i=0;i < aa.l ...

  7. 比特币测试网络搭建以及RPC服务开启-配置注意事项

    .bitcoin QA Test环境 启动指定参数: "C:\Program Files (x86)\Bitcoin\bitcoin-qt.exe" -testnet -serve ...

  8. [z]一分钟教你知道乐观锁和悲观锁的区别

    悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...

  9. if语句中的 == 和= 区别

    ”==“ 是判断二者的值是否相等   ”=“是赋值,是将后者的值赋值给前者,不需要比较,在if语句中用”==“来判断ul当前的状态,来判断执行的操作,若是用”=“,则相等于说ul的状态就是后者,直接执 ...

  10. 1F - A+B for Input-Output Practice (III)

    Your task is to Calculate a + b. Input Input contains multiple test cases. Each test case contains a ...