如图所示案例：
具体讲解：在stage上面绘制一个背景层和一个运动层，背景层保持不变，运动层会随着Animation设置的而运动，而且当鼠标经过运动层的圆圈时，运动速度会明显变慢，鼠标移开后，立马恢复原来运动速度。CSS3和HTML5放入一组中，该所属组顺时针旋转，JS所属组逆时针旋转；字体随着运动，自身反向旋转便能使其永远朝上显示。
html代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>webitcast案例</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
</style>
<script src="bower_components/konva/konva.min.js"></script>
<script type="text/javascript" src="js/zxjwebitcast.js"></script>
</head>
<div id="container">
<script type="text/javascript">
var stage=new Konva.Stage({//创建舞台
container:'container',
width:window.innerWidth,
height:window.innerHeight
//背景层
var bgLayer=new Konva.Layer();
stage.add(bgLayer);
//开始创建圆形
//中心点坐标
var centX=stage.width()/2;
var centY=stage.height()/2;
//圆形的半径
var innerRadius=126;
var outerRadius=220;
//虚线圆环
var innerCircle=new Konva.Circle({
x:centX,
y:centY,
radius:innerRadius,
stroke:'#ccc',
strokeWidth:4,
dash: [10,4],//虚线
var outerCircle=new Konva.Circle({
x:centX,
y:centY,
radius:outerRadius,
stroke:'#ccc',
strokeWidth:4,
dash: [10,4],
bgLayer.add(innerCircle);
bgLayer.add(outerCircle);
//中心蓝色的圆圈
var cenCircleText=new CircleText({
x:centX,
y:centY,
innerRadius: 70,//内环的半径
outerRadius: 88,
innerStyle:'#525A82',
outerStyle:'#E1E1E1',
text:'web全栈',
cenCircleText.addToGroupOrLayer(bgLayer);
bgLayer.draw();
//创建动画层，这一层会运动
var animateLayer=new Konva.Layer();
stage.add(animateLayer);
//第二层添加黄色和pink色的圆圈
//2层的动画
var L2Group=new Konva.Group({
x:centX,//这样设置后，L2Group的中心坐标为CentX,CentY,因此CSS3的X坐标为innerRadius*……
y:centY,
var L2_CircleText_CSS3=new CircleText({
x:innerRadius*Math.cos(-60*Math.PI/180),
y:innerRadius*Math.sin(-60*Math.PI/180),
innerRadius: 30,//内环的半径
outerRadius: 40,
innerStyle:'orange',
outerStyle:'#E1E1E1',
text:'CSS3',
L2_CircleText_CSS3.addToGroupOrLayer(L2Group);
var L2_CircleText_HTML5=new CircleText({
x:innerRadius*Math.cos(180*Math.PI/180),
y:innerRadius*Math.sin(180*Math.PI/180),
innerRadius: 30,//内环的半径
outerRadius: 40,
innerStyle:'pink',
outerStyle:'#E1E1E1',
text:'HTML5',
L2_CircleText_HTML5.addToGroupOrLayer(L2Group);
animateLayer.add(L2Group);
//第三层的圆圈组装到一个组中
var L3Group=new Konva.Group({
x:centX,
y:centY,
//第3层添加blue色的圆圈
var L3_CircleText_JS=new CircleText({
x:outerRadius*Math.cos(60*Math.PI/180),
y:outerRadius*Math.sin(60*Math.PI/180),
innerRadius: 40,//内环的半径
outerRadius: 50,
innerStyle:'#91BFF8',
outerStyle:'#E1E1E1',
text:'JS',
L3_CircleText_JS.addToGroupOrLayer(L3Group);
//第3层添加blue色的圆圈
var L3_CircleText_JQuery=new CircleText({
x:outerRadius*Math.cos(240*Math.PI/180),
y:outerRadius*Math.sin(240*Math.PI/180),
innerRadius: 40,//内环的半径
outerRadius: 50,
innerStyle:'#DD7FB2',
outerStyle:'#E1E1E1',
text:'JQuery',
L3_CircleText_JQuery.addToGroupOrLayer(L3Group);
animateLayer.add(L3Group);
animateLayer.draw();
//Konva的帧动画系统
var rotateAnglePerSecond=60;//每秒钟旋转的角度
var animate=new Konva.Animation(function(frame){
//相当于setInterval;每隔一段时间执行该方法；此方法更加智能
//计算当前帧需要旋转的角度，
var rotateAngle=rotateAnglePerSecond*frame.timeDiff/1000;//timeDiff：两次执行的时间差；是动态变化的，根据浏览器性能变化旋转速度，上一帧和当前帧的时间差
// var rotateAngle=2;
//旋转的角度;每一帧旋转的角度
L2Group.rotate(rotateAngle);//
//让2层上面的所有圆自己自我反向旋转，以便字体永远正向朝上
L2Group.getChildren().each(function(item,index){//获得所有子元素
item.rotate(-rotateAngle);
L3Group.rotate(-rotateAngle);
L3Group.getChildren().each(function(item,index){
item.rotate(rotateAngle);
},animateLayer);//此处表示
animate.start();
//Konva事件系统
animateLayer.on('mouseover',function(){
rotateAnglePerSecond=10;
animateLayer.on('mouseout',function(){
rotateAnglePerSecond=60;
</script>
</body>
</html>
封装的JS代码zxjwebitcast.js
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.innerStyle=option.innerStyle||'red';//内部圆颜色
this.outerStyle=option.outerStyle||'blue'//圆环颜色
this.text=option.text||'canvas';//填充文字
//让内圆，圆环，字体在一个组中，便于管理
this.group=new Konva.Group({
x:this.x,
y:this.y,
//初始化一个内圆
var innerCircle=new Konva.Circle({
radius:this.innerRadius,
fill:this.innerStyle,
opacity:.7
this.group.add(innerCircle);
//初始化一个圆环
var outerRing=new Konva.Ring({
innerRadius:this.innerRadius,
outerRadius:this.outerRadius,
fill:this.outerStyle,
opacity:.4
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',
fontSize:17,
fontFamily: '微软雅黑',
fontStyle:'bold'
this.group.add(text);
addToGroupOrLayer:function(arg){
arg.add(this.group);
Konva是HTML5 Canvas JavaScript框架，可为桌面和移动应用程序提供高性能动画，过渡，节点嵌套，分层，过滤，缓存，事件处理等。
您可以将事物绘制到舞台上，向它们添加事件侦听器，对其进行移动，缩放以及从其他形状中独立旋转它们以支持高性能动画，即使您的应用程序使用数千种形状也是如此。 配上令人敬畏的一面热饮。
该存储库是的GitHub分支。
访问：然后在上
帮助： ，
< script src =" https://unpkg.com/konva@3.1.0/konva.js " > </ script >
< div id =" con
以太阳系为例：
以太阳为中心点，水金木土地火天海依次围绕着太阳做圆周运动（嗯。。。假设为圆周运动吧）。以太阳为圆心点，所以在求行星做圆周运动时的半径就是行星的圆心点到太阳的圆心点，我们可以计算出太阳和行星的圆心点，我们可以通过函数获得行星和太阳的left和top值，left和top值在加上盒子本身的宽度。得到这些数据后我们就可以通过三角函数来算出行星运动的轨迹了，完成这些工作后我们就可以写代码了。...
原生 canvas 的操作主要基于上下文，需要使用者自己从0开始去实现一些基本功能，比较复杂。而 canvas 库文件则封装好了许多便利的对象，使得用户可以在比较高级的层面上进行绘制。
Konva是一个基于 Canvas 开发的 2d JavaScript框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果.
Konva 可以实现高性能动画, 过渡, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用.
Konva 允许在你舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的.
项目原著是从KineticJS的GitHub开始。
一、Konva 基本概念
Konva.js，全称适用于桌面/移动端应用的 HTML5 2d canvas 库，是一个HTML5 Canvas JavaScript 框架，它提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你
记得以前玩过一个很简单的小游戏，一个球在动，然后底下一个板来接，如果没接住撞到底边游戏就结束了，虽然忘了它叫什么名字，但一直心心念念，魂牵梦萦，刚好最近临过年需求不饱和、刚好之前一直想做但是没动手，刚好这两天在学习konvajs，刚好就有了这篇小文章，很简单，只要三步，包你三分钟学会。
konvajs简介
konvajs就像jquery之于DOM、Snap.svg之与svg一样之于canvas，可以方便的实现canvas的图形交互效果，使用它，你可以快速绘制常用图形，并能方便的给它添加样式、各种事件、动画效
var stage = new Konva.Stage({
container: 'container', //需要存放舞台的Dom容器
width: window.innerWidth, //设置全屏
height: window.innerHeight
//第二步：创建层
var layer = new Konva.Layer(); //创建一个层
stage.ad
在本系列的第二篇教程中，您学习了如何使用Konva绘制基本形状 。 您可以以一种或另一种方式组合基本形状以创建星形，环形，箭头，钟形或小屋。 Konva还允许您使用库提供的内置函数来创建一些常见的复杂形状。
在本教程中，您将学习如何在Konva中创建星星和戒指。 之后，我们将讨论如何使用Konva编写文本以及如何沿特定路径编写文本。 您还将学习如何使用Konva在画布上绘制图像和精灵。
