第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版
1、HTML
注意引入Konva.js库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Konva绘制圆环旋转动画</title>
<script src="konva/konva.min.js"></script>
<script src="CircleText.js"></script>
</head>
<body>
<div id="container"> </div> <script>
//创建舞台
var stage=new Konva.Stage({
container:'container',
width:window.innerWidth,//全屏
height:window.innerHeight }); //创建层 //中心点坐标
var cenX=stage.width()/2;
var cenY=stage.height()/2; //创建背景层
var bgLayer=new Konva.Layer();
stage.add(bgLayer); //绘制背景
var innerRadius=252/2;//内环的半径
var outerRadius=220;//外环的半径 // 创建背景内环虚线圆
var innercircle=new Konva.Circle({
x:cenX,
y:cenY,
radius:innerRadius,
stroke:"#C1C1C1", //注意是stroke 不是strokeStyle
strokeWidth:3,
dash:[10,4] //dash设置虚线 10实线 4空
});
//把 内环虚线圆添加到背景层中
bgLayer.add(innercircle); //创建背景的外环的虚线圆
var outercircle=new Konva.Circle({
x:cenX,
y:cenY,
radius:outerRadius,
stroke:"#C1C1C1", //注意是stroke 不是strokeStyle
strokeWidth:3,
dash:[10,4] //dash设置虚线 10实线 4空
});
//把外虚线圆，添加到层中。
bgLayer.add(outercircle); //把中心圆形添加到层中
var cenCircleText=new CircleText({
x:cenX,
y:cenY,
innerRadius:132/2,
outerRadius:90,
text:'Web全栈',
innerStyle:'#525A82',
outerStyle:'#E1E1E1'
}); cenCircleText.addToGroupLayer(bgLayer);
bgLayer.draw();//渲染层 //动画层的绘制
var animateLayer=new Konva.Layer();
stage.add(animateLayer); //创建2环的组
var Group2=new Konva.Group({
x:cenX,//组内的 x，y坐标。
y:cenY
}); //添加2环的圆
//2环上的 CSS3形状组
var CircleText_CSS3=new CircleText({
x:innerRadius*Math.cos(30*Math.PI/180),//圆的x,y坐标
y:innerRadius*Math.sin(30*Math.PI/180),
innerRadius:30, //内圆半径
outerRadius:40, //外圆的半径
innerStyle:'yellow', //内圆填充的颜色
outerStyle:'#E1E1E1', //外圆环填充的颜色
text:'CSS3'
});
CircleText_CSS3.addToGroupLayer(Group2); //添加2环的圆
//2环上HTML5的圆形组
var CircleText_HTML5=new CircleText({
x:innerRadius*Math.cos(240*Math.PI/180),//文本圆的x坐标
y:innerRadius*Math.sin(240*Math.PI/180),//文本圆的y坐标
innerRadius:30, // 内圆半径
outerRadius:40, // 外圆半径
innerStyle:'orange', //内部填充样式
outerStyle:'#E1E1E1', //外圆的样式
text:'HTML5' // 内圆的文本
});
CircleText_HTML5.addToGroupLayer(Group2); //添加2环的圆
//2环上js的圆形组
var CircleText_js=new CircleText({
x:innerRadius*Math.cos(150*Math.PI/180),
y:innerRadius*Math.sin(150*Math.PI/180),
innerRadius:35,
outerRadius:45,
innerStyle:'green',
outerStyle:'#E1E1E1',
text:'Javascript'
});
CircleText_js.addToGroupLayer(Group2); animateLayer.add(Group2);//第二层的组添加到层上 //创建3环的的组
var Group3=new Konva.Group({
x:cenX,
y:cenY
});
//绘制3环圆
var CircleText_vue=new CircleText({
x:outerRadius*Math.cos(90*Math.PI/180),
y:outerRadius*Math.sin(90*Math.PI/180),
innerRadius:40,
outerRadius:50,
innerStyle:'blue',
outerStyle:'#E1E1E1',
text:'vue'
});
CircleText_vue.addToGroupLayer(Group3); var CircleText_bs=new CircleText({
x:outerRadius*Math.cos(200*Math.PI/180),
y:outerRadius*Math.sin(200*Math.PI/180),
innerRadius:45,
outerRadius:55,
innerStyle:'#E92322',
outerStyle:'#E1E1E1',
text:'Bootstrap'
});
CircleText_bs.addToGroupLayer(Group3); var CircleText_jq=new CircleText({
x:outerRadius*Math.cos(30*Math.PI/180),
y:outerRadius*Math.sin(30*Math.PI/180),
innerRadius:35,
outerRadius:45,
innerStyle:'#A735D8',
outerStyle:'#E1E1E1',
text:'jQuery'
});
CircleText_jq.addToGroupLayer(Group3);
animateLayer.add(Group3);//3环的组添加到层上 animateLayer.draw(); var rotateAnglPerSecond=60;////每秒钟设置旋转60
//Konva帧动画系统
var animate=new Konva.Animation(
function(frame){
//每隔一会执行此方法，类似 setInterval
//timeDiff: 两帧之间时间差。是变化的，根据电脑性能和浏览器的状态动态变化。
//计算 当前帧需要旋转的角度。
var rotateAngle=rotateAnglPerSecond*frame.timeDiff/1000;//上一帧到当前帧的时间差 毫秒
Group2.rotate(rotateAngle);// 不是弧度，是角度
//获得二环上圆的内部组进行反向旋转
Group2.getChildren().each(function(item,index){
item.rotate(-rotateAngle);
}); //3环逆旋转
Group3.rotate(-rotateAngle);
//获得三环上圆的内部组进行反向旋转
Group3.getChildren().each(function(item,index){
item.rotate(rotateAngle);
}); },animateLayer);
animate.start();//启动动画 //Konva 事件系统
//给动画层绑定一个鼠标移上去的事件
animateLayer.on('mouseover',function(){
//设置旋转角度
rotateAnglPerSecond=10;//设置旋转的角度为10度，旋转变慢。
});
//给动画层绑定 mouseout离开的事件。
animateLayer.on('mouseout',function(){
//当鼠标移开的时候，旋转加快
rotateAnglPerSecond=60;//设置旋转角度为60度，旋转变快
}); </script>
</body>
</html>
2、CircleText.js
/**
* Created by Administrator on 2018/2/1.
*/
function CircleText(option){
this._init(option);//构造函数默认执行初始化工作
} CircleText.prototype={
_init:function(option){
this.x=option.x||0; //圆形组的中心点坐标
this.y=option.y||0;
this.innerRadius=option.innerRadius||0; //内圆半径
this.outerRadius=option.outerRadius||0;
this.text=option.text||'canvas'; //圆内的文字
this.innerStyle=option.innerStyle||'red'; //内圆的填充样式
this.outerStyle=option.outerStyle||'blue';//外圆的填充样式 //创建文字和圆形的一个组
this.group=new Konva.Group({
x:this.x,//设置组的x，y坐标后，所有的内部元素按照组内的新坐标系定位。
y:this.y
}); //初始化一个内部圆
var innerCircle=new Konva.Circle({ //创建一个圆
x:0,
y:0,
radius:this.innerRadius, //圆的半径
fill:this.innerStyle, //圆的填充颜色
opacity:.8
});
//把内部圆，添加到组内
this.group.add(innerCircle); //初始化一个圆环
var outerRing=new Konva.Ring({//初始化一个圆环
x:0,
y:0,
innerRadius:this.innerRadius, //内圆的半径
outerRadius:this.outerRadius, //外圆的半径
fill:this.outerStyle, //圆环的填充的样式
opacity:.3 //透明度
});
//把外环，添加到组内
this.group.add(outerRing); //初始化一个文字
var text=new Konva.Text({
x:0-this.outerRadius,
y:-7,
width:this.outerRadius*2, //文字的宽度
fill:'#fff', //文字的颜色
text:this.text, //文字的内容
align:'center' , //居中显示
fontStyle: 'bold'//字体加粗
});
//把文字添加到组内
this.group.add(text);
}, //把 组添加到层或者其他组中。
addToGroupLayer:function(arg){
arg.add(this.group);
} }
运行效果：
第165天：canvas绘制圆环旋转动画的更多相关文章
- canvas绘制折线路径动画
最近有读者加我微信咨询这个问题: 其中的效果是一个折线路径动画效果,如下图所示: 要实现以上路径动画,一般可以使用svg的动画功能.或者使用canvas绘制,结合路径数学计算来实现. 如果用canva ...
- HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...
- canvas绘制圆环
- canvas实现有递增动画的环形进度条
哈?标题不知道啥意思? 老规矩,直接看图! 效果如下: 高清大图! 码农多年,老眼昏花,动图看不清?!那就看静态截图!!! 不同分值效果如下: 看完了卖家秀,我们来看产品的制作过程吧 ...
- android旋转动画和平移动画具体解释，补充说一下假设制作gif动画放到csdn博客上
先上效果图: 我这里用的是GifCam来制作的gif动画,能够在http://download.csdn.net/detail/baidu_nod/7628461下载, 制作过程是先起一个模拟器,然后 ...
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
- 测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...
- canvas 绘制动态圆环进度条
由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_e ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
随机推荐
- 20155302 实验三 敏捷开发与XP实践
20155302 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验内容及步骤 (一)编码标准 在IDEA中使用工具(Code->Reformate Code)把代码重 ...
- 关于第11周课堂mini dc的课堂练习
测试代码: 码云链接 import java.util.Scanner; public class MyDCTester { public static void main(String[] args ...
- 20155308&20155316 2017-2018-1 《信息安全系统设计基础》实验一
20155308&20155316 2017-2018-1 <信息安全系统设计基础>实验一 此次实验我和黄月同学一起做了1.2.3.5项,第4项在实验课上做完了,但是没有按时提交. ...
- 20155320 2016-2017-2《Java程序设计》课程总结
20155320 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:第一次写随笔,回答了老师的一些问题,写下了期望和目标 预备作业2:总结了一下自 ...
- kali更新源相关 -- 没有release文件、签名无效、404
kali更新源相关 -- 没有release文件.签名无效.404 这个随笔主要是处理Mac下使用VMare虚拟机安装Kali时候我遇到的一些关于更新源的问题 (因为本人为了这个问题折腾了四五个小时, ...
- WPF 动画：同为控件不同命 - 简书
原文:WPF 动画:同为控件不同命 - 简书 1. 及格与优秀 读大学的时候,有一门课的作业是用 PPT 展示. 但是我们很多同学都把 PPT 当做 Word 来用,就单纯地往里面堆文字. 大家都单纯 ...
- linux下order by 报出ORDER BY clause is not in SELECT list
一.问题: 在程序执行查询的时候,order by 不能找到要排序的列 二.解决: 在linux环境下,程序之前连接其他库可以正常运行,但是换了一个库后数据就不能正常的显示了,查看后台报出排序列找不到 ...
- centos7下将java -jar命令运行一个项目做成systemd服务
有些时候运行一个java项目在linux下通过一条简单的java命令即可,如: #nohup java -jar jenkins.war & ###这里为后台运行jenkins 在此背景下,j ...
- 建表/修改表名/增加删除字段（MySql）
修改表名:alter table 旧表名 rename 新表名; 删除字段:alter table 表名 drop 字段名; 增加字段:alter table 表名 add 字段名 字段类型 [def ...
- IDEA 创建Spring Boot 项目
一.准备环境 配置Maven,打开设置页面File - Setting,快捷键Ctrl + Alt + S,找到Maven,默认是IDEA 自带的插件,User setting file 配置文件默认 ...