故事背景：這幾天遇到一個客戶，是做會議記錄的，每次會議過程中，都會有特定設(shè)備記錄下講話人的位置以角度值顯示。他給我角度值，讓我給他做一個圖表來展示每個人的一個大概位置。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供貢覺網(wǎng)站建設(shè)、貢覺做網(wǎng)站、貢覺網(wǎng)站設(shè)計、貢覺網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、貢覺企業(yè)網(wǎng)站模板建站服務(wù)，十多年貢覺做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

客戶想到的是用 Echarts 圖表來做，我首先想到的也是用 Echarts ，但是思考了他的要求以后，發(fā)現(xiàn)就一個簡單的框選圖表用 Echarts 來做是不是大材小用了，而且還要導(dǎo)入那么多的沒用的代碼。

于是我想到了用 canvas 畫布來仿著做，但又考慮了一下， canvas 操作起來不順手；究竟可不可以用普通的css結(jié)合 javascript 來把它做出來呢？此番思考驗證了：任何事情一定要多動腦，才能 碰到更簡單的解決問題的方式。

考慮到也許某天大家用得著，所以發(fā)布出來。注：擁有可移植性，可移到頁面任何位置，效果不會改變

先看最終效果吧：

圖一：

圖二：

這個小東西會涉及的知識點不多,歸納一下： js的三角函數(shù) 、 CSS3的transform 、 鼠標(biāo)的坐標(biāo)軸XY的計算 ...啊哈，差不多大體就這三方面的知識吧，如果你都只是有過了解也沒關(guān)系，因為都只用的到皮毛所以不必擔(dān)心。但是如果完全沒聽過，那就請您再去了解一下這方面知識。

代碼區(qū)域

會用到的一些知識點拓展

注：在js中設(shè)置Transform的時候我用到的不是scale()方法，因為我想兼容ie9以下的版本所以用了矩陣變化。當(dāng)然，你們也可以改為scale()，毫無影響。

1.在標(biāo)準(zhǔn)瀏覽器下的矩陣函數(shù)matix(a,b,c,d,e,f)、ie下的矩陣函數(shù)progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expend')

他們的共同點：M11 == a; M12 == c; M21 == b; M22 == d

不一樣的地方：ie下的矩陣函數(shù)沒有 e 和 f 兩個參數(shù)，在矩陣函數(shù)中 e 和 f 是用來位移的，也就是說ie下沒法通過矩陣函數(shù)來實現(xiàn)位移[ 不過我們這里好像不需要位移，嘿嘿 ]

2.在標(biāo)準(zhǔn)瀏覽器下矩陣函數(shù)matrix中a,b,c,d,e,f 一一對應(yīng)的的初始值為：matix(1,0,0,1,0,0)

3.通過矩陣實現(xiàn)縮放：

x軸縮放：a = x a c = x c e = x*e

y軸縮放：b = y b d = y d f = y*f

4.通過矩陣實現(xiàn)位移：[ie下沒位移]

x軸位移：e = e+x

y軸位移：f = f+y

5.通過矩陣實現(xiàn)傾斜：

x軸傾斜：c = Math.tan(xDeg/180*Math.PI)

y軸傾斜：b = Math.tan(yDeg/180*Math.PI)

6.通過矩陣實現(xiàn)旋轉(zhuǎn)：

a = Math.cos(deg/180*Math.PI);

b = Math.sin(deg/180*Math.PI);

c = -Math.sin(deg/180*Math.PI);

d = Math.cos(deg/180*Math.PI);

7.至于三角函數(shù)我就不介紹了，百度一大把。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。