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();