javascript使用canvas绘图（二）

不同的lineCap（线条样式）

let gd=this.$refs.canvas.getContext('2d')
            gd.beginPath();
            gd.lineWidth=10;
            gd.lineCap="butt";
            gd.moveTo(50,50)
            gd.lineTo(150,50)
            gd.stroke();
            gd.closePath();
            gd.beginPath();
            gd.lineCap="round";
            gd.moveTo(50,70)
            gd.lineTo(150,70)
            gd.stroke();
            gd.closePath();
            gd.beginPath();
            gd.lineCap="square";
            gd.moveTo(50,90)
            gd.lineTo(150,90)
            gd.stroke();
            gd.closePath();

这里获取节点我采用的vue自带的refs，即在div加入 ref='canvas'属性，不熟悉的朋友可以使用上一篇文章的getElementByClassName

不同的lineJoin(两条线交合处的拐弯样式)

paint7(){
            let gd=this.$refs.canvas.getContext('2d')
            this.drawMText(100,'round',gd);//圆角
            this.drawMText(200,'bevel',gd);//平角
            this.drawMText(300,'miter',gd);//尖角

        },
        drawMText(y,str,gd){
            gd.beginPath();
            gd.lineCap="butt";
            gd.lineJoin=str;
            gd.lineWidth=10;
            gd.moveTo(20,y);
            gd.lineTo(70,y-80);
            gd.lineTo(82.5,y-25);
            gd.lineTo(90,y-80)
            gd.lineTo(140,y);
            gd.stroke();
            gd.closePath();
        }

构图阴影

let gd=this.$refs.canvas.getContext('2d');
    gd.beginPath()
    gd.shadowColor='#4C4C4C';//阴影颜色
    gd.shadowOffsetX=5;//x轴上偏移量，负数为相反方向
    gd.shadowOffsetY=-10;//y轴上偏移量，
    gd.shadowBlur=4;//模糊的像素值，0则不模糊
    gd.fillStyle='blue';
    gd.fillRect(100,100,100,100);
    gd.stroke();
    gd.closePath();

渐变

let gd=this.$refs.canvas.getContext('2d');
    gd.beginPath();
    let gradient=gd.createLinearGradient(30,30,70,70)//相当于一条渐变线
    gradient.addColorStop(0,'#2C56E2');//起始颜色
    gradient.addColorStop(1,'#E23C2C');//终止颜色
    gd.fillStyle=gradient//添加渐变
    gd.fillRect(10,10,100,100)
    gd.stroke();
    gd.closePath();