第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秒左右的图像 ...
随机推荐
- 20155330 2016-2017-2 《Java程序设计》第三周学习总结
20155330 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 学习目标 区分基本类型与类类型 理解对象的生成与引用的关系 掌握String类和数组 理解封 ...
- 20145226夏艺华 《Java程序设计》第7&8周学习总结、实验一
[实验一]http://www.cnblogs.com/bestixyh/p/6358734.html [第7周]http://www.cnblogs.com/bestixyh/p/6380475.h ...
- Tomcat设置是否可以上传文件到服务器
今天,我做的一个点菜项目要求做一个添加菜品,把菜品的路径保存进数据库,然后将菜品的图片保存进tomcat相应的目录中. 一开始,我在客户端写的代码是直接向tomcat的目录写文件,但是会出现403错误 ...
- 【bzoj4827】[Hnoi2017]礼物 FFT
题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一天 ...
- NLP的12条精髓
NLP是神经语言程序学 (Neuro-Linguistic Programming) 的英文缩写.一.没有两个人是一样的 No two persons are the same. 1．没有两个人的人生 ...
- MySQL☞左外链接与右外连接
外链接查询:即要查询有关联关系的数据,还要查询没有关联关系的数据.(个人理解为:表A和表B两个关联的列中)如下图: emmm,简单的来说两个表的关联关系:book.bid=bookshop.id,他们 ...
- vue Map 渲染DOM
遍历对象(map),以键值对k:v的形式渲染DOM (1)DOM (2)数据模板
- NO--10今天带大家回忆回忆“闭包”吧！
对于‘闭包,我相信很多人都掉进过这个坑里,也相信很多人没能详细的理解这个问题,今天带大家再次走进闭包: 写这篇文章时的心情是十分忐忑的,因为对于我们今天的主角:闭包,很多小伙伴都写过关于它的文章,相信 ...
- 451. Swap Nodes in Pairs【LintCode java】
Description Given a linked list, swap every two adjacent nodes and return its head. Example Given 1- ...
- Centos安装Python3(自带pip和setuptools)
安装zlib相关依赖 解决zipimport.ZipImportError: can't decompress data和pip3 ssl证书问题 sudo yum -y install zlib* ...