2、CircleText.js

 1 /**
 2  * Created by Administrator on 2018/2/1.
 3  */
 4 function CircleText(option){
 5     this._init(option);//构造函数默认执行初始化工作
 8 CircleText.prototype={
 9     _init:function(option){
10         this.x=option.x||0; //圆形组的中心点坐标
11         this.y=option.y||0;
12         this.innerRadius=option.innerRadius||0; //内圆半径
13         this.outerRadius=option.outerRadius||0;
14         this.text=option.text||'canvas';        //圆内的文字
15         this.innerStyle=option.innerStyle||'red'; //内圆的填充样式
16         this.outerStyle=option.outerStyle||'blue';//外圆的填充样式
18         //创建文字和圆形的一个组
19         this.group=new Konva.Group({
20             x:this.x,//设置组的x，y坐标后，所有的内部元素按照组内的新坐标系定位。
21             y:this.y
22         });
24         //初始化一个内部圆
25         var innerCircle=new Konva.Circle({ //创建一个圆
26             x:0,
27             y:0,
28             radius:this.innerRadius, //圆的半径
29             fill:this.innerStyle,    //圆的填充颜色
30             opacity:.8
31         });
32         //把内部圆，添加到组内
33         this.group.add(innerCircle);
35         //初始化一个圆环
36         var outerRing=new Konva.Ring({//初始化一个圆环
37             x:0,
38             y:0,
39             innerRadius:this.innerRadius,   //内圆的半径
40             outerRadius:this.outerRadius,   //外圆的半径
41             fill:this.outerStyle,           //圆环的填充的样式
42             opacity:.3                      //透明度
43         });
44         //把外环，添加到组内
45         this.group.add(outerRing);
47         //初始化一个文字
48         var text=new Konva.Text({
49             x:0-this.outerRadius,
50             y:-7,
51             width:this.outerRadius*2,   //文字的宽度
52             fill:'#fff',    //文字的颜色
53             text:this.text, //文字的内容
54             align:'center' , //居中显示
55             fontStyle: 'bold'//字体加粗
56         });
57         //把文字添加到组内
58         this.group.add(text);
59         },
61     //把 组添加到层或者其他组中。
62     addToGroupLayer:function(arg){
63         arg.add(this.group);
64     }
运行效果：
canvas 中绘制贝塞尔曲线
几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线
所以掌握贝塞尔曲线势在必得。这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG
绘制贝塞尔曲线
第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。
const canvas = document.getElementById( 'canvas' 
                                游客izoamw2f43amu