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画布中，画了一个150150的矩形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();