javascript使用canvas繪圖（一）

畫一條直線

css

.canvas{
            background-color: #8BF0F7;
            cursor: pointer;
        }

後面的css會統一使用該樣式，再也不重複貼出css代碼

html

<canvas class="canvas" width="400px" height="400px"></canvas>
    <!-- 這裏設置畫布大小須要在標籤裏面直接設置 -->

後面的js會統一使用該樣式，再也不重複貼出css代碼

js

let canvas = document.getElementsByClassName('canvas');//獲得canvas
    let ca=canvas[0]
    let gd= ca.getContext('2d');//獲得canvas上下文環境
    gd.beginPath();//清除原來的痕跡
    gd.strokeStyle='red';//線條顏色
    gd.moveTo(100,100);//起點
    gd.lineTo(200,200);//終點
    gd.lineWidth=50;//線條寬度
    gd.stroke();//這是最後一步，繪製

畫一個矩形

let canvas=document.getElementsByClassName('canvas')[0];
    let gd = canvas.getContext('2d')
    gd.beginPath();
    gd.fillStyle='#B1B7B8';//設置填充顏色
    gd.fillRect(50,20,100,50);//設置定位大小（左上寬高）
    gd.stroke();

在一個矩形中清空一個矩形，使其透明

let canvas=document.getElementsByClassName('canvas')[0];
            let gd = canvas.getContext('2d')
            gd.beginPath();
            gd.fillStyle='#149794'
            gd.fillRect(20,20,150,150);
            gd.clearRect(40,40,50,50);
            gd.stroke();

這裏理解爲，在canvas畫布中，畫了一個150 150的矩形A，在這個矩形中又繪製了一個5050的clear矩形B，這個B會
清除A中的那一塊區域，使B這一區域變得透明，從而顯示了畫布的淺藍色,並非所有層透明

畫一條曲線

使用arc方法，比較簡單易懂，

let canvas=document.getElementsByClassName('canvas')[0];
            let gd = canvas.getContext('2d');
            gd.beginPath();
            gd.strokeStyle="#3C5AF2"
            gd.arc(100,100,50,0,90/180*Math.PI);
            //參數：圓心x座標，圓心y，半徑，開始角度，結束角度（2*Math.PI是整圓）
            gd.stroke();

如下使用arc方法繪製餅圖

使用arcTo

let canvas=document.getElementsByClassName('canvas')[0];
            let gd = canvas.getContext('2d')
            gd.beginPath();
            gd.strokeStyle='red'
            gd.moveTo(20,20)
            gd.arcTo(200,40,200,170,100)
            gd.lineTo(200,170)
            gd.stroke();