原创 canvas作圖系列——柱圖

柱圖 canvas畫圖最主要的就是把一張圖分成各個部分,然後一塊一塊的去進行繪製,比如柱圖,在繪製的過程中就可以分成x軸,x軸的label,y軸,y軸的label,平行於x軸的分割線,以及每個柱體等等和一些細節。 柱圖的x軸就是等

原创 canvas作圖系列——折(曲)線圖

折(曲)線圖 折線圖和曲線圖最主要的地方就是獲取到當前點以及下一個點的座標值,只要有了這兩個值,其他的都不是問題。canvas繪製曲線主要用的的是二次貝塞爾曲線和三次貝塞爾曲線 二次貝塞爾曲線 ctx.moveTo(20,20)

原创 canvas作圖系列——氣泡圖

氣泡圖 這裏做的氣泡圖是柱形圖的一種變體形式,但是基本思想其實差不多,只不過柱形的高矮換成的半徑的大小,當然圓心的座標也要隨之改變,圓心的縱座標要加上跟半徑同比例的縮放係數才能保證圓的底部都在同一條水平線上 圖一 functio

原创 canvas作圖系列——儀表盤圖

儀表盤圖 儀表盤其實也是環圖的一種,但是比環圖多的是一個指針,指針需要根據環圖的進度調整位置,而這其中主要用到的就是canvas的旋轉,但是注意的是canvas的旋轉是以畫布原點爲旋轉中心旋轉的,因此,我們需要將旋轉中心調整到我們

原创 canvas作圖系列——環圖

環圖 canvas製作圓形所用的方法是 ctx.arc(x,y,r,0,Math,PI*2,false) 其中的6個參數分別是圓心橫座標,圓心縱座標,半徑,起始角度,結束角度,false順勢針/true逆時針 而圓環也是用的這個

原创 獲取數組(樹)的最大深度(JS)

首先有一個數組,比如可以定義爲這樣的格式 var treeArr={ name:'root', child:[ { name: 'a', child: [

原创 正則匹配不包含某表達式的字符串

/^((?!pattern).)*&/ 標題即答案,但是這句正則要怎麼理解呢 要想理解首先要先弄明白(?!pattern)這一運算符 以下pattern就代表用戶自己定義的表達式 (?!pattern) 正向否定預查(negat