用canvas实现围绕旋转动画

使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针

代码demo链接地址代码demo链接地址

html文件

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body {margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;}</style><script src="js/konva.js"></script><script src="js/circle.js"></script>
</head>
<body>
<div id="cas"></div><script>var width = window.innerWidth;var height = window.innerHeight;//创建舞台var stage = new Konva.Stage({container: "cas",width: width,height: height});//创建层var layer = new Konva.Layer();//创建组1var group = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});//最外层圆var circle1 = new Konva.Circle({x: 0,y: 0,radius: 250,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle1);//第二个圆var circle2 = new Konva.Circle({x: 0,y: 0,radius: 150,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle2);//第三个圆var circle3 = new Konva.Circle({x: 0,y: 0,radius: 135,stroke: "blue",strokeWidth: 2,dash: [10, 5]});group.add(circle3);//第四个圆var circle4 = new Konva.Circle({x: 0,y: 0,radius: 105,fill: "#ccc",opacity: 0.4});group.add(circle4);//第五个圆var circle5 = new Konva.Circle({x: 0,y: 0,radius: 80,fill: "#74A2F0"});group.add(circle5);//添加文字var text = new Konva.Text({x: -80,y: -12,text: "WEB全栈",fill: "white",fontSize: 24,width: 160,align: "center"});group.add(text);layer.add(group);//*****************************************************//创建组2var outGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"];var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 250 * Math.cos(72 * i * Math.PI / 180), //圆心x轴的坐标y : 250 * Math.sin(72 * i * Math.PI / 180), //圆心y轴的坐标outR :  60,  //外圆的半径inR :  50,    //内圆的半径fill : arrColor[i],  //填充颜色text: arrText[i],    //文字outOpacity : 0.3,   //外圆的透明度inOpacity : 0.6      //内圆的透明度});cir.drawCircle(outGroup);}layer.add(outGroup);//***********************************************//创建组3var inGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"];var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 135 * Math.cos(90 * i * Math.PI / 180), //圆心x轴的坐标y : 135 * Math.sin(90 * i * Math.PI / 180), //圆心y轴的坐标outR :  45,  //外圆的半径inR :  35,    //内圆的半径fill : arrColor[i],  //填充颜色text: arrText[i],    //文字outOpacity : 0.3,   //外圆的透明度inOpacity : 0.6      //内圆的透明度});cir.drawCircle(inGroup);}layer.add(inGroup);//************************************************//运动动画var step = 1; //转动的角度var anim = new Konva.Animation(function() {outGroup.rotate(step);outGroup.getChildren().each(function (ele, index) {ele.rotate(-step);});inGroup.rotate(-step);inGroup.getChildren().each(function (ele, index) {ele.rotate(step);});}, layer);anim.start();stage.add(layer);stage.on("mouseover", function () {step = 0.3;});stage.on("mouseout", function () {step = 1;});
</script>
</body>
</html>

js文件

function Circle(obj) {this._init(obj);
}
Circle.prototype = {_init: function (obj) {this.x = obj.x, //圆心x轴的坐标this.y = obj.y, //圆心y轴的坐标this.outR =  obj.outR,  //外圆的半径this.inR =  obj.inR,    //内圆的半径this.color = obj.fill,  //填充颜色this.text = obj.text,   //内圆的文字this.outOpacity = obj.outOpacity,   //外圆的透明度this.inOpacity = obj.inOpacity      //内圆的透明度},drawCircle: function (group) {//创建一个组var groupCir = new Konva.Group({x: this.x,y: this.y});//外圆var outCir = new Konva.Circle({x: 0,y: 0,radius: this.outR,fill: this.color,opacity: this.outOpacity});groupCir.add(outCir);//内圆var inCir = new Konva.Circle({x: 0,y: 0,radius: this.inR,fill: this.color,opacity: this.inOpacity});groupCir.add(inCir);//添加文字var text = new Konva.Text({x: -this.inR,y: -10,text: this.text,fill: "white",fontSize: 20,width: 2 * this.inR,align: "center"});groupCir.add(text);group.add(groupCir);}
}

效果图片：

用canvas实现围绕旋转动画相关推荐

android旋转动画和平移动画具体解释，补充说一下假设制作gif动画放到csdn博客上...
先上效果图: 我这里用的是GifCam来制作的gif动画,能够在http://download.csdn.net/detail/baidu_nod/7628461下载, 制作过程是先起一个模拟器,然后 ...
android 左移动画_android旋转动画和平移动画详解，补充说一下如果制作gif动画放到csdn博客上...
先上效果图: 制作过程是先起一个模拟器,然后把GifCam的框拖到模拟器上面,点击Rec的new先,然后点击Rec,然后就save到本地成gif文件这里做一个左右旋转,上下旋转,和左右移动的动画,先 ...
css3加js 3d旋转动画围绕旋转根据请求后台的数据动态渲染
3d 围绕旋转 <style>body {height: auto !important;background-color: #020432;}html{height: auto !imp ...
CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
opengl 如何加阴影_OpenGL + Qt: 3 - 旋转动画和键盘操纵
前三篇链接: OpenGL + Qt: 0 - 三角形绘制 OpenGL + Qt: 1 - 用下拉框选颜色 OpenGL + Qt: 2 - 走向3D,画正四面体这一周笔者经历了漫长的洲际飞行和昏 ...
android 360旋转动画,ANDROID——仿360手机卫士的旋转打分控件
简介灵感源自360手机卫,主要功能就是实现显示评分或等级的效果.并稍微改良了一下,有更好的实用性和扩展性. 因为主要用途就是显示"分数","评价",所以暂且叫 ...
html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTML结果只需 ...
qt 旋转后的三维坐标_OpenGL + Qt: 3 - 旋转动画和键盘操纵
前三篇链接: 这一周笔者经历了漫长的洲际飞行和昏天黑地的倒时差,所以本篇内容相对少一些,侧重 Qt 而不是 OpenGL.在上一篇中,我们绘制了一个正四面体,然而正四面体的一个特点是无论你从哪个角度看 ...
Silverlight Blend动画设计系列二：旋转动画（RotateTransform）
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform) Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑 ...

用canvas实现围绕旋转动画

用canvas实现围绕旋转动画相关推荐

最新文章

热门文章