JavaScript canvas implements rotation animation around-JS Tutorial-php.cn

This article mainly introduces JavaScript canvas to realize rotation animation in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Use the canvas of canvas to realize the rotation animation, with the outer circle clockwise and the inner layer counterclockwise.

Code demo link address: Code demo link address

html file

Copy after login

js file

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); } }

Copy after login

Effect picture:

##JavaScript canvas implements rotation animation around

Detailed explanation of simple implementation example of css rotation animation effect

3D cube rotation animation

The above is the detailed content of JavaScript canvas implements rotation animation around. For more information, please follow other related articles on the PHP Chinese website!