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);
canvas 实现圆环效果的更多相关文章
- canvas/CSS仪表盘效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第165天:canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果
- canvas实现倒计时效果示例(vue组件内编写)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- canvas扩散圆环
最近看了很多牛的动画,想想自己的canvas的确很菜. 公式在那里,但是不是太会套.找demo发现都是很难的 于是找了个简单的效果 圆环从中间扩散的效果 关键是 globalCompositeOper ...
- 微信小程序里自定义组件,canvas组件没有效果
methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...
- canvas弹动效果
弹动效果,用物体与目标的距离乘上系数再累加至速度上,让物体呈加速度运动,再让速度乘与摩擦力系数,让物体最终停止运动 代码如下所示 var canvas = document.getElementByI ...
- 用Canvas制作剪纸效果
在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...
随机推荐
- 基本数据类型(dict)
05. 基本数据类型(dict)内容:1. 字典的简单介绍2. 字典增删改查和其他操作3. 字典的嵌套⼀. 字典的简单介绍字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对 ...
- enlarge your dataset
列举常见的几种数据集增强方法: 1.flip 翻折(左右,上下) # NumPy.'img' = A single image. flip_1 = np.fliplr(img) # TensorFl ...
- js五种继承优缺点
//1.原型继承 //缺点: 当父级的属性有引用类型的时候,任意一个实例修改了这个属性,其他实例都会受影响 // 1)基本类型:Number Boolean String undefined null ...
- linux详解sudoers
sudo使用 Linux是多用户多任务的操作系统, 共享该系统的用户往往不只一个.出于安全性考虑, 有必要通过useradd创建一些非root用户, 只让它们拥有不完全的权限; 如有必要,再来提升权限 ...
- Aspose.words一 DOM结构
2.文档对象模型概述 2.1 DOM介绍 Aspose.Words的文档对象模型(以下简称DOM)是一个Word文档在内存中的映射,Aspose.Words的DOM可以编程读取.操作和修改Word文档 ...
- 因为要生成的折线数量是不定的 ,所以需要echarts 动态的为option中的Series添加数据
series:function(){ var serie=[]; var aa = zhonglei[0].split(","); for( var i=0;i < aa.l ...
- 比特币测试网络搭建以及RPC服务开启-配置注意事项
.bitcoin QA Test环境 启动指定参数: "C:\Program Files (x86)\Bitcoin\bitcoin-qt.exe" -testnet -serve ...
- [z]一分钟教你知道乐观锁和悲观锁的区别
悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...
- if语句中的 == 和= 区别
”==“ 是判断二者的值是否相等 ”=“是赋值,是将后者的值赋值给前者,不需要比较,在if语句中用”==“来判断ul当前的状态,来判断执行的操作,若是用”=“,则相等于说ul的状态就是后者,直接执 ...
- 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 ...