在小程序常常会用到海报，这就需要canvas的一些常用方法，修饰文字，画图片圆角的封装方法，把它抽成canvas.js文件，方便以后用

　　在canvas.js   （笔记---canvas）

　　　　

 1 /**
 2  * 文本换行
 3  * @param {Object} obj
 4  */
 5 export const textWrap = function(obj){
 6   let tr = getTextLine(obj);
 7   for (let i = 0; i < tr.length; i++) {
 8     if (i < obj.line){
 9       let txt = {
10         context: obj.context,
11         x: obj.x,
12         y: obj.y + (i * obj.height),
13         color: obj.color,
14         size: obj.size,
15         align: obj.align,
16         baseline: obj.baseline,
17         text: tr[i],
18         bold: obj.bold
19       };
20       if (i == obj.line - 1) {
21         if (tr.length > obj.line) {
22           txt.text = txt.text.substring(0, txt.text.length - 1) + '...';
23         }
24       }
25       drawText(txt);
26     }
27   }
28 }
29 /**
30  * 渲染文字
31  *
32  * @param {Object} obj
33  */
34 var drawText = function (obj) {
35   obj.context.save();
36   obj.context.setFillStyle(obj.color);
37   obj.context.setFontSize(obj.size);
38   obj.context.setTextAlign(obj.align);
39   obj.context.setTextBaseline(obj.baseline);
40   if (obj.bold) {
41     obj.context.fillText(obj.text, obj.x, obj.y - 0.5);
42     obj.context.fillText(obj.text, obj.x - 0.5, obj.y);
43   }
44   obj.context.fillText(obj.text, obj.x, obj.y);
45   if (obj.bold) {
46     obj.context.fillText(obj.text, obj.x, obj.y + 0.5);
47     obj.context.fillText(obj.text, obj.x + 0.5, obj.y);
48   }
49   obj.context.restore();
50 }
51 /**
52  * 获取文本折行
53  * @param {Object} obj
54  * @return {Array} arrTr
55  */
56 var getTextLine = function(obj){
57   obj.context.setFontSize(obj.size);
58   let arrText = obj.text.split('');
59   console.log(arrText);
60   let line = '';
61   let arrTr = [];
62   for (let i = 0; i < arrText.length; i++) {
63     var testLine = line + arrText[i];
64     var metrics = obj.context.measureText(testLine);
65     var width = metrics.width;
66     if ((width > obj.width && i > 0)||arrText[i]=='\n') {  //
67       arrTr.push(line);
68       line = arrText[i]=='\n'?arrText[i+1]:arrText[i];
69     } else {
70       line = testLine;
71     }
72     if (i == arrText.length - 1) {
73       arrTr.push(line);
74     }
75   }
76   return arrTr;
77 }
78 
79 /**
80  * 圆形头像
81  */
82 export const circleImg = function(context, img, x, y, r){
83   context.save();
84   var d = 2 * r;
85   var cx = x + r;
86   var cy = y + r;
87   context.beginPath();
88   context.arc(cx, cy, r, 0, 2 * Math.PI);
89   context.clip();
90   context.drawImage(img, x, y, d, d);
91   context.restore()
92 }