canvas 实验
本次跟mui关系不大，纯属本人误入歧途；
上次的图
根据上次的图犹豫纠结了好久（反正没上班），还是用img做了bg；
内容里的标题文字很好处理就不多说了，上面有图看到没，小人沙发 各种背景特效光圈；
哼，设计一点都不考虑我拿图片糊弄的后果，果断我决定试试canvas；
之前拿canvas都是花花圆圈 三角直线 这次稍稍复杂点；
第一道佛光
首先HTML里搞个canvas出来 主要的是ID 样式主要是用来定位的；
<canvas id="guide_bg_1" class="guide-canvas" width="320" height="320" ></canvas>
获取canvas 获取canvas的2D上下文 （翻译的书上说是上下文，我觉得翻译成环境比较好理解）
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
为了避免有人误入歧途和喷我 getElementById(),里面之所以写id因为他是个参数，咳咳
/**
* guide各页canvas初始化;参数 obj的属性：num:Number,color:Array,bgcolor:Array,content:Array
* @param {IDString} id
* @param {IDString} img_id
* @param {Object} obj
*/
function guideCanvasInit(id,img_id,obj) {}
另外小秀一下我的多余做功，看到那个注释没，恩，我用的也不大熟，就是模仿学习争取早日用的炉火纯青；作用？看图：
纯粹瞎搞
具体请参考：JSDOC+规范
其实我看mui.js文件里面就在用，其实没事练练，说不准自己就可能搞点什么。
继续，canvas的上下文搞好了，我们该画了
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
/*var tGrd = context.createLinearGradient(150, 0, 150, 300);
tGrd.addColorStop(0, '#f0689d');
tGrd.addColorStop(0.8, '#ffffff');*/
context.lineWidth = "5";//线条宽度
context.strokeStyle = #000;//线条颜色
context.beginPath();//绘制开始
context.arc(160, 150, 145, 0, 2 * Math.PI, false);
//arc（x,y,r,starAngle,endAngle,true/false）xy坐标，r半径，起始点结束点，true逆时针 false顺时针
context.stroke();//绘制线条
context.closePath();//绘制结束
黑圈
由图可知（让我想起上初中做数学题）：
难点一：如何使线成为渐变的
于是Y-R又开始了新一轮的进食（啃书）；
于是在 《Javascript 高级程序设计（第三版）》15.2.8 中找到了关于canvas渐变相关的东西
createLinearGradient()方法
这个方法接收4个参数：起点的X坐标、起点的Y坐标、终点的X坐标、终点的Y坐标。
还是上图吧
它是由（30,30）到（50,50）渐变
如图所示，它赋值给fillStyle属性，由fillRect()方法填充的；
凭啥你fill能干我stroke不能干，试试呗就，大不了就错；
注意addColorStop()方法的灵活使用；
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
var tGrd = context.createLinearGradient(150, 0, 150, 300);
tGrd.addColorStop(0, '#f0689d');
tGrd.addColorStop(0.8, '#ffffff');
context.lineWidth = "5";
context.strokeStyle = tGrd;
context.beginPath();
context.arc(160, 150, 145, 0, 2 * Math.PI, false);
context.stroke();
context.closePath();
效果图
这次就整理到这里，没事多啃书，遇到啥情况至少见过，哈哈；
下次实践：
context.drawImage（）
//公式 x1= X0 + r * cos(角度*3.14/180);
//公式 Y1= Y0 + r * sin(角度*3.14/180);
context.font="14px arial";
context.textAlign="center";
context.textBaseline="middle";
完善后的效果图
自动平均分配位置
