最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript canvas实现围绕旋转动画
时间:2017-12-11 编辑:猪哥 来源:一聚教程网
使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针
代码demo链接地址:代码demo链接地址
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); } }
效果图片:
-
下一个: 基于JavaScript实现五子棋游戏
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28