使用Canvas怎么實(shí)現(xiàn)一個(gè)手勢(shì)控制功能？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

十余年的黃梅網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整黃梅建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“黃梅網(wǎng)站設(shè)計(jì)”,“黃梅網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

首先講一下思路：

首先跟圖需求可以知道，作出這樣的效果需要一組對(duì)象，每個(gè)對(duì)象有顏色，所占比例，名字等，也就是這樣：

let chartData=[
{color:"#FD7A4F",title:"其他",percent:0.2},
{color:"#FDD764",title:"建筑/土木工程",percent:0.25},
***
]

注意百分比加在一起必須是100%，也就是1，否則圓環(huán)可能不會(huì)畫滿，或者多處一部分。

根據(jù)每部分所占比例計(jì)算出每個(gè)部分所占的弧度，使用ctx.arc(x0, y0,r, startAngle, endAngle);畫出圓弧，當(dāng)前項(xiàng)需要向外偏移一些，過(guò)程中具體上代碼講這部分：

首先定義一個(gè)multiCircleChart類,

//ES6寫法
class multiCircleChart {
   constructor(id, chartDatas, defalutIndex,callback) {
    /*構(gòu)造函數(shù)：
    傳入的參數(shù)ID，canvas的id,用于放置繪畫內(nèi)容；
    chartDatas：畫圖所需參數(shù)數(shù)據(jù)；
    defalutIndex：defalutIndex:當(dāng)前選中項(xiàng)
    callback：點(diǎn)擊環(huán)形圖的回調(diào)函數(shù)
    */
        this.canvas = document.getElementById(id);
        this.size = this.canvas.parentNode.clientWidth * 4;
        this.canvas.style.width = this.size / 4 + "px";
        this.canvas.style.height = this.size / 4 + "px";
        this.canvas.width = this.size;
        this.canvas.height = this.size;
        /*
        因?yàn)樵谝苿?dòng)端畫圖需要多倍圖，這樣圖像會(huì)很清晰，所以這里size，也就是canvas的context設(shè)置為canvas大小的4倍；
        注意：?。?！canvas.width指的是畫布內(nèi)容(context)的大小，cavas.style.width是canvas在頁(yè)面上顯示的大小，也就是說(shuō)，真是的圖片是顯示圖片大小的4倍
        */
       
        this.ctx = this.canvas.getContext("2d");
        this.defalutIndex = defalutIndex;//當(dāng)前選中項(xiàng)
        this.chartDatas = chartDatas;//繪制所需數(shù)據(jù)
        this.lineWidth = this.size/5;//環(huán)形圖的圓環(huán)寬度，設(shè)置為canvas寬度的1/5；
        this.startAngle = -0.5;//環(huán)形圖起始角度，這里為-0.5，計(jì)算時(shí)也就是-0.5*Math.PI,放在坐標(biāo)系中也就是環(huán)形圖最高點(diǎn)那個(gè)位置的角度；順便說(shuō)一下，右側(cè)為0，下方為0.5，左側(cè)為1
        this.callback=callback;
        this.canvas.addEventListener('click',this.mouseDownEvent.bind(this));
        /*給canvas添加監(jiān)聽函數(shù)，并將事件傳遞過(guò)去，用于計(jì)算點(diǎn)擊位置在哪個(gè)數(shù)據(jù)項(xiàng)里*/
        this.AngleList=[];//記錄每一項(xiàng)的結(jié)束角度，結(jié)合監(jiān)聽事件，計(jì)算點(diǎn)擊事件的位置在哪個(gè)數(shù)據(jù)項(xiàng)里
    }
}

構(gòu)造函數(shù)寫好了，接下來(lái)需要畫環(huán)形圖了：

class multiCircleChart {
    ***
    draw() {
        this.ctx.clearRect(0,0,this.size,this.size);//每次繪畫前，先清空一下畫布，避免畫布被污染
        if (this.chartDatas.length == 0) return;//如果傳入的參數(shù)長(zhǎng)度為0的話，也就不需要繼續(xù)畫了
        this.ctx.lineWidth = this.lineWidth;//為圓環(huán)寬度賦值
        let startAngle = Math.PI * -0.5;//設(shè)置起始角度
        let endAngle = startAngle;設(shè)置結(jié)束角度
        this.AngleList=[];
        /*下面就開始動(dòng)筆畫圖了*/
        this.chartDatas.map((item, i) => {
            this.ctx.beginPath();//開始畫圖命令，避免粘連
            this.ctx.strokeStyle = item.color;//設(shè)置邊框顏色，因?yàn)槲覀儺嫷氖菆A環(huán)，所以填充色不需要，只要有邊框色就行了
            if (i > 0) {
                //從第二項(xiàng)開始（i==1）時(shí)，起始角度就是上一次的結(jié)束角度
                startAngle = endAngle;
            }
            endAngle = startAngle + item.percent * Math.PI * 2;//計(jì)算當(dāng)前項(xiàng)的結(jié)束角度，根據(jù)所占的百分比計(jì)算所占角度（item.percent * Math.PI * 2），再結(jié)合起始角度就可以計(jì)算出真正的偏移角度了（startAngle + item.percent * Math.PI * 2）
            this.AngleList.push(endAngle);
            //選中當(dāng)前項(xiàng)，需要向外偏移
            if (i == this.defalutIndex) {
                /*
                選中當(dāng)前項(xiàng)，需要向外偏移
                使用起始角度和結(jié)束角度的中間值來(lái)就算偏移位置
                */
                let centerAngle=(startAngle+endAngle)/2;
                let x=this.lineWidth*0.2*Math.cos(centerAngle);//x軸偏移量
                let y=this.lineWidth*0.2*Math.sin(centerAngle);//y軸偏移量
                //未選中項(xiàng)的圓心位置是（this.size / 2, this.size / 2），選中的需要偏移，圓心是（this.size / 2+x, this.size / 2+y）；這樣畫出的環(huán)形就會(huì)向外偏移環(huán)形寬度的1/5了；
                this.ctx.arc(this.size / 2+x, this.size / 2+y, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
            } else {
                this.ctx.arc(this.size / 2, this.size / 2, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
            }
            this.ctx.stroke();
        });
    }
}

現(xiàn)在所畫的圖是一個(gè)靜態(tài)的，點(diǎn)擊環(huán)形圖是不會(huì)有任何變化的,當(dāng)然現(xiàn)在這樣也是可以用的

 let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas,defalutIndex,);//new 一個(gè)
 circlePeiChart.draw();//畫圖

外部切換選中項(xiàng)

circlePeiChart.defalutIndex=2;//修改選中項(xiàng)Index值
 circlePeiChart.draw();//重繪

那么怎樣點(diǎn)擊canvas切換當(dāng)前選項(xiàng)呢，思路很簡(jiǎn)單：以canvas中心為圓心，監(jiān)測(cè)點(diǎn)擊位置，點(diǎn)擊位置與圓心連成一線，以直角坐標(biāo)系為參照，計(jì)算出點(diǎn)擊位置的弧度，跟angleList做比較，計(jì)算出點(diǎn)擊的是第幾項(xiàng)，然后修改defalutIndex，重繪canvas.

class multiCircleChart {
    ***
    ***
     mouseDownEvent(e){
        const [x1,y1]=[e.offsetX,e.offsetY];//點(diǎn)擊事件位置
        const [x0,y0]=[this.size/2/4,this.size/2/4];//原點(diǎn)位置；注意：原點(diǎn)位置為canvas中心，不是context中心
        let angle=0;
        if(x1>x0){
            //點(diǎn)擊位置在第一象限（y1>y0）或者第二象限(y1y0)
            y1
最后把整體代碼貼上吧
//html
//調(diào)用
let chartDatas=[ {color: "rgb(253, 122, 79)",title: "后端開發(fā)",percent: 0.2}, **];
let defalutIndex=0
let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas, defalutIndex,(i)=>{defalutIndex=i});
circlePeiChart.draw();
//重繪
circlePeiChart.defaultIndex=2;
circlePeiChart.draw();
/*
chartDatas [ {color: "rgb(253, 122, 79)",title: "后端開發(fā)",percent: 0.2}, **];
*/
class multiCircleChart {
    constructor(id, chartDatas, defalutIndex,callback) {
        this.canvas = document.getElementById(id);
        this.size = this.canvas.parentNode.clientWidth * 4;
        this.canvas.style.width = this.size / 4 + "px";
        this.canvas.style.height = this.size / 4 + "px";
        this.canvas.width = this.size;
        this.canvas.height = this.size;
        this.ctx = this.canvas.getContext("2d");
        this.defalutIndex = defalutIndex;
        this.chartDatas = chartDatas;
        this.lineWidth = this.size/5;
        this.startAngle = -0.5;
        this.callback=callback;
        this.canvas.addEventListener('click',this.mouseDownEvent.bind(this));
        this.AngleList=[];
    }
    draw() {
        this.ctx.clearRect(0,0,this.size,this.size);
        if (this.chartDatas.length == 0) return;
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.lineCap="butt";
        let startAngle = Math.PI * -0.5;
        let endAngle = startAngle;
        this.AngleList=[];
        this.chartDatas.map((item, i) => {
            this.ctx.beginPath();
            this.ctx.strokeStyle = item.color;
            if (i > 0) {
                startAngle = endAngle;
            }
            endAngle = startAngle + item.percent * Math.PI * 2;
            this.AngleList.push(endAngle);
            //選中當(dāng)前項(xiàng)，需要向外偏移
            if (i == this.defalutIndex) {
                //選中當(dāng)前項(xiàng)，需要向外偏移
                let centerAngle=(startAngle+endAngle)/2;
                let x=this.lineWidth*0.2*Math.cos(centerAngle);
                let y=this.lineWidth*0.2*Math.sin(centerAngle);
                this.ctx.arc(this.size / 2+x, this.size / 2+y, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
            } else {
                this.ctx.arc(this.size / 2, this.size / 2, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
            }
            this.ctx.stroke();
        });
    }
    mouseDownEvent(e){
        const [x1,y1]=[e.offsetX,e.offsetY];
        const [x0,y0]=[this.size/2/4,this.size/2/4];
        let angle=0;
        if(x1>x0){
            y1
關(guān)于使用Canvas怎么實(shí)現(xiàn)一個(gè)手勢(shì)控制功能問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
            
            
                        

            當(dāng)前題目：使用Canvas怎么實(shí)現(xiàn)一個(gè)手勢(shì)控制功能            

            當(dāng)前路徑：http://weahome.cn/article/pseodj.html