canvas圖形操作

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

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

    //canvas 不保存圖形,不存在事件,渲染速度極快 
    //畫弧度時需要將角度與弧度進行轉換
        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);//描邊,此處指的是文字左下角坐標
        gd.fillText('測試文字',100,100);//填充實體,此處指的是文字左下角坐標
    //canvas的transform
        1.rotate
        2.translate
        3.scale
    需要把gd.ratate()等transform所有操作要寫在畫圖之前;
    當transform操作組合使用時,需要倒序寫;
    gd.save();//制作動畫時，使用save()函數來保存當前圖像狀態
        gd.translate(200,175)//平移
        gd.ratate(30*Math.PI/180);//先轉在畫圖
        gd.strokeRect(-100,-75,100,100);//圖像是轉動整個canvas左上角,所以將圖像中心放到左上角，然后使用平移移動到想要的位置。
    gd.restore();//將之前保存的狀態恢復

擴展

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