美文网首页程序员
【MUI】Y-R，mui学习实践（2）

【MUI】Y-R，mui学习实践（2）

作者: Y_R | 来源:发表于2016-05-10 21:43 被阅读110次

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";
完善后的效果图 自动平均分配位置

相关文章