canvas 實(shí)驗(yàn)

本次跟mui關(guān)系不大，純屬本人誤入歧途；

上次的圖

根據(jù)上次的圖猶豫糾結(jié)了好久（反正沒(méi)上班），還是用img做了bg；
內(nèi)容里的標(biāo)題文字很好處理就不多說(shuō)了，上面有圖看到?jīng)]，小人沙發(fā) 各種背景特效光圈；
哼，設(shè)計(jì)一點(diǎn)都不考慮我拿圖片糊弄的后果，果斷我決定試試canvas；
之前拿canvas都是花花圓圈 三角直線 這次稍稍復(fù)雜點(diǎn)；

第一道佛光

首先HTML里搞個(gè)canvas出來(lái) 主要的是ID 樣式主要是用來(lái)定位的；

<canvas id="guide_bg_1" class="guide-canvas" width="320" height="320" ></canvas>

獲取canvas 獲取canvas的2D上下文 （翻譯的書(shū)上說(shuō)是上下文，我覺(jué)得翻譯成環(huán)境比較好理解）

var canvas = document.getElementById(id);
var context = canvas.getContext('2d');

為了避免有人誤入歧途和噴我 getElementById(),里面之所以寫(xiě)id因?yàn)樗莻€(gè)參數(shù)，咳咳

/**
 * guide各頁(yè)canvas初始化;參數(shù) 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) {}

另外小秀一下我的多余做功，看到那個(gè)注釋沒(méi)，恩，我用的也不大熟，就是模仿學(xué)習(xí)爭(zhēng)取早日用的爐火純青；作用？看圖：

純粹瞎搞

其實(shí)我看mui.js文件里面就在用，其實(shí)沒(méi)事練練，說(shuō)不準(zhǔn)自己就可能搞點(diǎn)什么。
繼續(xù)，canvas的上下文搞好了，我們?cè)摦?huà)了

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();//繪制開(kāi)始
    context.arc(160, 150, 145, 0, 2 * Math.PI, false);
//arc（x,y,r,starAngle,endAngle,true/false）xy坐標(biāo)，r半徑，起始點(diǎn)結(jié)束點(diǎn)，true逆時(shí)針 false順時(shí)針
    context.stroke();//繪制線條
    context.closePath();//繪制結(jié)束

黑圈

由圖可知（讓我想起上初中做數(shù)學(xué)題）：

難點(diǎn)一：如何使線成為漸變的

于是Y-R又開(kāi)始了新一輪的進(jìn)食（啃書(shū)）；
于是在 《Javascript 高級(jí)程序設(shè)計(jì)（第三版）》15.2.8 中找到了關(guān)于canvas漸變相關(guān)的東西

createLinearGradient()方法

這個(gè)方法接收4個(gè)參數(shù)：起點(diǎn)的X坐標(biāo)、起點(diǎn)的Y坐標(biāo)、終點(diǎn)的X坐標(biāo)、終點(diǎn)的Y坐標(biāo)。

還是上圖吧

它是由（30,30）到（50,50）漸變

如圖所示，它賦值給fillStyle屬性，由fillRect()方法填充的；
憑啥你fill能干我stroke不能干，試試唄就，大不了就錯(cuò)；
注意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();

效果圖

這次就整理到這里，沒(méi)事多啃書(shū)，遇到啥情況至少見(jiàn)過(guò)，哈哈；
下次實(shí)踐：
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";

完善后的效果圖

自動(dòng)平均分配位置