canvas圖形操作

    //核心代碼
        //canvas標(biāo)簽,寬高必須寫在行內(nèi)
        <canvas id = 'c1' width='800' height='800'></canvas>;
        //js代碼
        window.onload = function (){
            //獲取頁面上的canvas標(biāo)簽
            let oC = document.getElementById('c1');
            //獲取圖形上下文接口:包含所需屬性、函數(shù)
            let gd = oC.getContext('2d'); 
            //路徑操作 選中一個(gè)范圍
            gd.beginPath();//清除之前開啟的路徑,防止兩次路徑重復(fù)渲染
            gd.moveTo(470,81);//起點(diǎn)
            gd.lineTo(778,236);//連接
            gd.lineTo(532,411);//連接
            gd.lineTo(312,259);//連接
            gd.closePath();//系統(tǒng)自動(dòng)閉合,無需手動(dòng)處理閉合路徑,或者使用gd.lineTo(470,81);//手動(dòng)閉合路徑;
            
            gd.react();//畫矩形,參數(shù)x軸距離,y軸距離,寬,高
            gd.arc();//畫圓,參數(shù)為：圓心x,y,圓半徑,弧度開始,弧度結(jié)束,是否逆時(shí)針畫圖(true,false)
            //react、arc需配合以下函數(shù)進(jìn)行操作
            gd.stroke();//對選取進(jìn)行描邊,默認(rèn)黑
            gd.fill();//對選取進(jìn)行填充,默認(rèn)黑
            gd.lineWidth=10;//設(shè)置邊線寬度為10
            gd.strokeStyle='red';//設(shè)置邊線的顏色;
            gd.fillStyle='red';//設(shè)置填充的顏色;
            gd.clearRect();//清除一個(gè)矩形線框

            //react、arc也可以直接使用以下函數(shù)
            gd.strokeRect();//直接畫一個(gè)矩形線框
            gd.fillRect();//直接填充一個(gè)矩形線框
            gd.lineWidth=10;//設(shè)置邊線寬度為10
            gd.strokeStyle='red';//設(shè)置邊線的顏色;
            gd.fillStyle='red';//設(shè)置填充的顏色;
            gd.clearRect();//清除一個(gè)矩形線框
        }
    一切路徑操作開始之前,需要先使用beginPath()用來清除之前開啟的路徑,防止兩   次路徑重復(fù)渲染;

    //canvas 不保存圖形,不存在事件,渲染速度極快 
    //畫弧度時(shí)需要將角度與弧度進(jìn)行轉(zhuǎn)換
        function d2a(n){
            return n*Math.PI/180;
        }
        function a2d(n){
            return n*180/Math.PI;
        }
        gd.arc(400,500,d2a(0),d2a(360),false);//畫60度弧度
    //canvas處理字體
        gd.font='10px 宋體'
        gd.strokeText('測試文字',100,100);//描邊,此處指的是文字左下角坐標(biāo)
        gd.fillText('測試文字',100,100);//填充實(shí)體,此處指的是文字左下角坐標(biāo)
    //canvas的transform
        1.rotate
        2.translate
        3.scale
    需要把gd.ratate()等transform所有操作要寫在畫圖之前;
    當(dāng)transform操作組合使用時(shí),需要倒序?qū)?
    gd.save();//制作動(dòng)畫時(shí)，使用save()函數(shù)來保存當(dāng)前圖像狀態(tài)
        gd.translate(200,175)//平移
        gd.ratate(30*Math.PI/180);//先轉(zhuǎn)在畫圖
        gd.strokeRect(-100,-75,100,100);//圖像是轉(zhuǎn)動(dòng)整個(gè)canvas左上角,所以將圖像中心放到左上角，然后使用平移移動(dòng)到想要的位置。
    gd.restore();//將之前保存的狀態(tài)恢復(fù)

擴(kuò)展

requestAnimationFrame();
    逐幀執(zhí)行,可以代替定時(shí)器,比定時(shí)器更好用;
    實(shí)例：
    requestAnimationFrame(next);
    function next(){
        alert('測試');
        requestAnimationFrame(next);
    }
ev.offsetX,ev.offsetY;
    獲取鼠標(biāo)在當(dāng)前物體上的坐標(biāo)點(diǎn);兼容性canvas的瀏覽器就兼容該屬性