canvas学习

画布学习

自己用vue组件写的一个demo,便于以后使用时实时查看，特此留下笔记，其中图片到时自己随便从其他地方找几张就可以使用啦。

效果图

<template>
    <div>

        <canvas id="canvas" ref="canvas" class="canvas"></canvas>
        <div class="bg">
            <button @click="drawRect()">画矩形</button>
            <button @click="drawLine()">画线</button>
            <button @click="drawLine2()">画三角形</button>
            <button @click="drawLine3()">画填充三角形</button>
            <button @click="drawPi()">画圆</button>
            <button @click="drawPi2()">画圆弧</button>
            <button @click="drawPi3()">画填充圆弧</button>
            <button @click="drawPi4()">画圆弧arcTo折线</button>
            <button @click="drawstrokeRect()">画边框矩形</button>
            <button @click="drawRect2()">画内空矩形</button>
            <button @click="drawQuadraticCurveTo()">画二次贝塞尔曲线</button>
            <button @click="drawBezierCurveTo()">画三次贝塞尔曲线</button>
            <button @click="testFillStyle()">查看fillStyle</button>
            <button @click="testStrokeStyle()">查看strokeStyle</button>
            <button @click="testGlobalAlpha()">查看globalAlpha</button>
            <button @click="testLineStyle()">查看线宽</button>
            <button @click="testLineCap()">查看线条末端样式</button>
            <button @click="testLineJion()">查看线条与线条结合样式</button>
            <button @click="testSetLineDash()">虚线</button>
            <button @click="testText()">设置文本</button>
            <button @click="drawImg()">设置图片背景</button>
            <button @click="drawImg2()">设置图片切片</button>
            <button @click="testSave()">save和restore</button>
            <button @click="testTranslate()">变形tranlate</button>
            <button @click="testRotate()">旋转roate</button>
            <button @click="testScale()">缩放scale</button>
            <button @click="testTransform()">变性矩阵transform</button>
            <button @click="testGlobalCompositeOperation1()">合成source-over</button>
            <button @click="testGlobalCompositeOperation2()">合成source-in</button>
            <button @click="testGlobalCompositeOperation3()">合成source-out</button>
            <button @click="testGlobalCompositeOperation4()">合成source-atop</button>
            <button @click="testGlobalCompositeOperation5()">合成destination-over</button>
            <button @click="testGlobalCompositeOperation6()">合成destination-in</button>
            <button @click="testGlobalCompositeOperation7()">合成destination-out</button>
            <button @click="testGlobalCompositeOperation8()">合成destination-atop</button>
            <button @click="testGlobalCompositeOperation9()">合成lighter</button>
            <button @click="testGlobalCompositeOperation10()">合成darken</button>
            <button @click="testGlobalCompositeOperation11()">合成lighten</button>
            <button @click="testGlobalCompositeOperation12()">合成xor</button>
            <button @click="testClip()">剪裁路径</button>
            <button @click="testAnimate()">动画-太阳系</button>
            <button @click="testCreateLinearGradient()">渐变色</button>
            <button @click="testLineToLine()">蝌蚪线</button>
            <button @click="stopAnimate()">暂停动画</button>
            <button @click="holdAnimate()">继续动画</button>
            <button @click="clearRectFn()">清空整个画布</button>
            
            
        </div>
        
    </div>
</template>

<script>
import Img1 from "../assets/2.jpg"
import Img3 from "../assets/3.jpeg"
import Sun from "../assets/sun.png"
import Earth from "../assets/earth.png"
import Moon from "../assets/moon.png"

import LineClass from './lineClass.js';

export default {
    data(){
        return{
            ctx:null,
            Img1,
            Img3,
            Sun,
            Earth,
            Moon,
            animate:null,
            myArr:[],
            startAnimateBool:false
        }
    },
    mounted(){
        
        
        if(this.$refs.canvas.getContext){
            this.ctx = this.$refs.canvas.getContext("2d");
        }else{
            return;
        }
        
        this.$refs.canvas.height=Math.floor(document.body.clientHeight);
        this.$refs.canvas.width=Math.floor(document.body.clientWidth);
       
    },
    computed:{

    },
    watch:{

    },
    methods: {
        clearRectFn(){//清空所有
            this.ctx.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height);
        },
        drawRect2(){
            this.ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
            this.ctx.fillRect(200,200,400,400);
             this.ctx.clearRect(220,220,100,100);
             this.ctx.clearRect(480,220,100,100);
            this.ctx.beginPath();
             this.ctx.strokeStyle = '#ffffff';//线颜色
            this.ctx.arc(400, 400, 50, 0, Math.PI, false);
            this.ctx.stroke();
        },
        drawstrokeRect(){//画矩形边框
            this.ctx.strokeStyle = 'red';//线颜色
            this.ctx.lineWidth = 10;//线粗细
            this.ctx.strokeRect(200,200,300,300);
        },
        drawRect(){//画矩形
            this.ctx.fillStyle="#FF0000";
            //this.ctx.fillRect(100,100,150,75);
            //context.fillRect(x, y, width, height);
            //x:填充矩形的起点横坐标,y:填充矩形的起点纵坐标,width:填充矩形宽,height:填充矩形高,
            // 中心点坐标
            var centerX = this.$refs.canvas.width / 2;
            var centerY = this.$refs.canvas.height / 2;
            // 矩形填充

            this.ctx.fillRect(centerX - 30, centerY - 4, 60, 8);
             this.ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            this.ctx.fillRect(centerX - 4, centerY - 30, 8, 60);
        },
         drawLine3(){//画填充三角形
            this.ctx.moveTo(210,110);
            this.ctx.lineTo(350,150);
            this.ctx.lineTo(310,350);
            this.ctx.fill();
        },
        drawLine2(){//画三角形
            this.ctx.moveTo(210,110);
            this.ctx.lineTo(350,150);
            this.ctx.lineTo(310,350);
            this.ctx.closePath();
            this.ctx.stroke();
        },
        drawLine(){//画线
            this.ctx.moveTo(310,310);
            this.ctx.lineTo(450,350);
            this.ctx.lineTo(410,450);
            this.ctx.stroke();
        },
        drawPi(){//画圆
            this.ctx.fillStyle="#FF0000";
            this.ctx.beginPath();
            this.ctx.arc(370,218,50,0,Math.PI*2,true);
            this.ctx.closePath();
            this.ctx.fill();
        },
        drawPi2(){//画圆弧
            this.ctx.beginPath();
             this.ctx.fillStyle="#FF0000";
            this.ctx.arc(370,218,50,Math.PI*45/180,Math.PI/2+Math.PI*45/180,false);
            this.ctx.stroke();
        },
        drawPi3(){//画填充圆弧
            this.ctx.beginPath();
            this.ctx.arc(370,218,50,Math.PI*45/180,Math.PI/2+Math.PI*45/180,false);

            this.ctx.fill();
        },
        drawPi4(){//画圆弧arcTo折线
            this.ctx.beginPath();
            this.ctx.moveTo(200, 200);
            //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
            this.ctx.arcTo(400, 200, 400, 400, 30);
            this.ctx.lineTo(400, 400);
             this.ctx.lineWidth = 10;//线粗细
            this.ctx.stroke();
            
            // this.ctx.beginPath();
            // this.ctx.rect(50, 50, 10, 10);
            // this.ctx.rect(200, 50, 10, 10)
            // this.ctx.rect(200, 200, 10, 10)
            // this.ctx.fill()
        },
        drawQuadraticCurveTo(){//画二次贝塞尔曲线
            this.ctx.beginPath();
            this.ctx.moveTo(100, 200); //起始点
            //绘制二次贝塞尔曲线
            this.ctx.quadraticCurveTo(350, 300, 100, 350);
            this.ctx.stroke();
        },
        drawBezierCurveTo(){//画三次贝塞尔曲线
            this.ctx.beginPath();
            this.ctx.moveTo(40, 200); //起始点
            var cp1x = 20, cp1y = 100;  //控制点1
            var cp2x = 150, cp2y = 50;  //控制点2
            var x = 200, y = 200; // 结束点
            //绘制三次贝塞尔曲线
           this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
            this.ctx.stroke();

             this.ctx.beginPath();
             this.ctx.rect(40, 200, 10, 10);
             this.ctx.rect(cp1x, cp1y, 10, 10);
             this.ctx.rect(cp2x, cp2y, 10, 10);
             this.ctx.rect(x, y, 10, 10);
             this.ctx.fill();
        },
        testFillStyle(){//设置图形的填充颜色
            for (let i = 0; i < 6; i++){
                for (let j = 0; j < 6; j++){
                this.ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                    Math.floor(255 - 42.5 * j) + ',0)';
                this.ctx.fillRect((j + 4) * 50, (i + 4) * 50, 50, 50);
                }
            }
        },
        testStrokeStyle(){//设置图形轮廓的颜色
            for (let i = 0; i < 6; i++){
                for (let j = 0; j < 6; j++){
                    this.ctx.strokeStyle = `rgb(${this.randomInt(0, 255)},${this.randomInt(0, 255)},${this.randomInt(0, 255)})`;
                    this.ctx.strokeRect((j + 4) * 50, (i + 4) * 50, 40, 40);
                }
            }
        },
        randomInt(from, to){//返回随机的 [from, to] 之间的整数(包括from，也包括to)
            return parseInt(Math.random() * (to - from + 1) + from);
        },
        testGlobalAlpha(){//用来设置画布全局透明度，0-1
            // 设置合法范围透明度
            this.ctx.globalAlpha = 0.5;
            // 绘制一个方块
            this.ctx.fillStyle = 'blue';
            this.ctx.fillRect(100, 100, 100, 100);
            // 设置一个范围外的透明度
            this.ctx.globalAlpha = 0.5;
            this.ctx.fillStyle = 'red';
            this.ctx.fillRect(170, 130, 100, 100);
        },
        testLineStyle(){//线宽。只能是正值。默认是 1.0.起始点和终点的连线为中心，上下各占线宽的一半。
             this.ctx.beginPath();
            this.ctx.moveTo(140,200);
            this.ctx.lineTo(190,200);
            this.ctx.lineWidth = 1;
            this.ctx.stroke();

            this.ctx.beginPath();
            this.ctx.moveTo(200,200);
            this.ctx.lineTo(250,200);
            this.ctx.lineWidth = 10;
            this.ctx.stroke();

            this.ctx.beginPath();
            this.ctx.moveTo(260,200);
            this.ctx.lineTo(310,200);
            this.ctx.lineWidth = 30;
            this.ctx.stroke();
        },
        testLineCap(){//线条末端样式。butt,round,square
            var lineCaps = ["butt", "round", "square"];
 
            for (var i = 0; i < 3; i++){
                this.ctx.beginPath();
                this.ctx.moveTo(120 + 30 * i, 330);
                this.ctx.lineTo(120 + 30 * i, 400);
                this.ctx.lineWidth = 20;
                this.ctx.lineCap = lineCaps[i];
                this.ctx.stroke();
            }
            
            this.ctx.beginPath();
            this.ctx.moveTo(100, 330);
            this.ctx.lineTo(400, 330);
            
            this.ctx.moveTo(100, 400);
            this.ctx.lineTo(400, 400)
            
            this.ctx.strokeStyle = "red";
            this.ctx.lineWidth = 1;
            this.ctx.stroke();
        },
        testLineJion(){//同一个 path 内，设定线条与线条间接合处的样式.共有 3 个值 round, bevel 和 miter：
            var lineJoin = ['round', 'bevel', 'miter'];
            this.ctx.lineWidth = 20;
        
            for (var i = 0; i < lineJoin.length; i++){
                this.ctx.lineJoin = lineJoin[i];
                this.ctx.beginPath();
                this.ctx.moveTo(50, 250 + i * 50);
                this.ctx.lineTo(100, 300 + i * 50);
                this.ctx.lineTo(150, 250 + i * 50);
                this.ctx.lineTo(200, 300 + i * 50);
                this.ctx.lineTo(250, 250 + i * 50);
                this.ctx.stroke();
            }
        },
        testSetLineDash(){//用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。
            this.ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
            this.ctx.lineDashOffset = 10;
            this.ctx.strokeRect(250, 250, 210, 210);
        },
        testText(){//绘制文本.1.fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。2.strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
           /*
           font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。
            textAlign = value 文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。
            textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
            direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
            */
            this.ctx.font = "100px sans-serif";
            this.ctx.fillText("天若有情", 100, 200,100);
            this.ctx.strokeText("天若有情", 100, 300)
        },
        drawImg(){//绘制图片
            // 参数 1：要绘制的 img  
            //console.log(Img1);
            let img = new Image();
            
            let _that = this;
            img.src = this.Img1;
            //考虑到图片是从网络加载
            img.onload = function(){
                //drawImage(image, x, y, width, height)
                 // 参数 2、3：绘制的 img 在 canvas 中的坐标
                 //参数4、5:图片大小
                _that.ctx.drawImage(img,100,100,300,200); 
            }

        },
        drawImg2(){//绘制图片切片
            let img = new Image();
            
            let _that = this;
            img.src = this.Img1;

            let img3 = new Image();
            
            img3.src = this.Img3;
            //考虑到图片是从网络加载
            img.onload = function(){
                //drawImage(image, x, y, width, height)
                 // 参数 2、3：绘制的 img 在 canvas 中的坐标
                 //参数4、5:图片大小
                _that.ctx.drawImage(img,100,100,400,250,100,550,300,180); 
                _that.ctx.drawImage(img3,600,100);
            }
        },
        testSave(){
            this.ctx.fillRect(100, 100, 150, 150);   // 使用默认设置绘制一个矩形
            this.ctx.save();                  // 保存默认状态
        
            this.ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变
            this.ctx.fillRect(115, 115, 120, 120); // 使用新的设置绘制一个矩形
        
            this.ctx.save();                  // 保存当前状态
            this.ctx.fillStyle = '#FFF'       // 再次改变颜色配置
            this.ctx.fillRect(130, 130, 90, 90);   // 使用新的配置绘制一个矩形
            this.ctx.restore();               // 重新加载之前的颜色状态
            this.ctx.fillRect(145, 145, 60, 60);   // 使用上一次的配置绘制一个矩形
        
            this.ctx.restore();               // 加载默认颜色配置
            this.ctx.fillRect(160, 160, 30, 30);   // 使用加载的配置绘制一个矩形
        },
        testTranslate(){//变形
            this.ctx.save(); //保存坐原点平移之前的状态
            this.ctx.translate(100, 100);
            this.ctx.strokeRect(0, 0, 100, 100)
            this.ctx.restore(); //恢复到最初状态
            //this.ctx.save();
            this.ctx.translate(220, 220);
            this.ctx.fillRect(0, 0, 100, 100);
            //this.ctx.restore();
        },
        testRotate(){//旋转坐标轴。
            this.ctx.fillStyle = "red";
            this.ctx.save();
            
            this.ctx.translate(100, 100);
            this.ctx.rotate(Math.PI / 180 * 45);
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(100, 100, 100, 100);
            this.ctx.restore();
            
            this.ctx.save();
            this.ctx.translate(0, 0);
            this.ctx.fillRect(200, 200, 50, 50)
            this.ctx.restore();
        },
        testScale(){//缩放
            this.ctx.save();
            this.ctx.scale(0.5,0.5);
            this.ctx.fillRect(100,100,100,100);
            this.ctx.restore();

            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(100,300,100,100);
        },
        testTransform(){//变性矩阵
                /* 
                    context.transform(a, b, c, d, e, f);
                    a:水平缩放
                    b:水平倾斜
                    c:垂直倾斜
                    d:垂直缩放
                    e:水平位移
                    f:垂直位移

                */
            this.ctx.transform(1, 1, 0, 1, 0, 0);
            this.ctx.fillRect(200, 200, 100, 100);
        },
        testGlobalCompositeOperation1(){//合成
           // 1.source-over 这是默认设置，新图像会覆盖在原有图像。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "source-over"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation2(){//合成
           // 1.source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "source-in"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation3(){//合成
           // 1.source-out 仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "source-out"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation4(){//合成
           // 1.source-atop 新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "source-atop"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation5(){//合成
           // 1.destination-over 新图像会在老图像的下面。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "destination-over"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation6(){//合成
           // 1.destination-in 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "destination-in"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },

        testGlobalCompositeOperation7(){//合成
           // 1.destination-out 仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "destination-out"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation8(){//合成
           // 1.destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "destination-atop"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation9(){//合成
           // 1.lighter 新老图像都显示，但是重叠区域的颜色做加处理。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "lighter"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation10(){//合成
           // 1.darken 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "darken"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation11(){//合成
           // 1.保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "lighten"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testGlobalCompositeOperation12(){//合成
           // 1.xor 重叠部分会变成透明。
            this.ctx.fillStyle = "blue";
            this.ctx.fillRect(200, 200, 200, 200);
        
            this.ctx.globalCompositeOperation = "xor"; //全局合成操作
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(300, 300, 200, 200);
        },
        testClip(){//剪裁路径
            this.ctx.beginPath();
            this.ctx.arc(200,200, 100, 0, Math.PI * 2);
            this.ctx.clip();
        
            this.ctx.fillStyle = "pink";
            this.ctx.fillRect(200, 200, 100,100);

        },
        testAnimate(){//动画
            let earth = new Image();//地球
            earth.src = this.Earth;

            let moon = new Image();//月亮
            moon.src = this.Moon;

            let sun  = new Image();//太阳
            sun.src = this.Sun;

            let _that = this;
            sun.onload = function(){
                setInterval(() => {
                    _that.animateFn(sun,earth,moon);
                }, 1000);
                
            }
        },
        animateFn(sun,earth,moon){
            this.ctx.clearRect(0,0,1000,1000);
            this.ctx.save();
            this.ctx.translate(500,500);
            this.ctx.drawImage(sun,0,0,150,150);

            
            this.ctx.translate(75,75);

            this.ctx.beginPath();
            this.ctx.strokeStyle = "rgba(255,255,0,0.5)";
            this.ctx.arc(0,0,150,0,Math.PI*2);
            this.ctx.stroke();

            let times = new Date();//时间
            //绘制地球
            let mins = times.getMinutes();//分钟
            this.ctx.rotate(Math.PI/180*6*mins);

            this.ctx.translate(0,-150);
            this.ctx.drawImage(earth,-30,-30,60,60);
            
            this.ctx.beginPath();
            this.ctx.strokeStyle = "rgba(255,0,0,.3)";
            this.ctx.arc(0,0,50,0,Math.PI*2);
            this.ctx.stroke();

            let secs = times.getSeconds();//秒
            this.ctx.rotate(Math.PI/180*6*secs);
            this.ctx.translate(0,-50);
            this.ctx.drawImage(moon,-10,-10,20,20);
            this.ctx.restore();

           // requestAnimationFrame(this.animateFn(sun,earth,moon));
        },
        testCreateLinearGradient(){//渐变色
            this.ctx.save();
            // 创建渐变
            let gradient = this.ctx.createLinearGradient(200, 0, 500, 0);
            /*
                context.createLinearGradient(x0, y0, x1, y1);
                x0:渐变起点横坐标
                y0:渐变起始点纵坐标
                x1:渐变结束点横坐标
                y1:渐变结束纵坐标
            */
            gradient.addColorStop(0, 'red');
            gradient.addColorStop(1, 'green');
            // 设置填充样式为渐变
            this.ctx.fillStyle = gradient;
            // 左上角和右下角分别填充2个矩形
            this.ctx.fillRect(210, 210, 160, 60);
            this.ctx.fillRect(320, 280, 160, 60);
            
            this.ctx.beginPath();
            this.ctx.lineWidth = 10;
            this.ctx.strokeStyle = gradient;
            this.ctx.lineJoin = "round";
            this.ctx.moveTo(200,400);
            this.ctx.lineTo(250,400);
            this.ctx.lineTo(250,450);
            this.ctx.lineTo(500,450);
            this.ctx.stroke();


            let gradient2 = this.ctx.createLinearGradient(200, 600, 500, 800);
            gradient2.addColorStop(0, 'yellow');
            gradient2.addColorStop(1, 'black');
            
            this.ctx.beginPath();
            this.ctx.lineWidth = 10;
            this.ctx.strokeStyle = gradient2;
            this.ctx.lineJoin = "round";
            this.ctx.moveTo(200,600);
            this.ctx.lineTo(250,600);
            this.ctx.lineTo(250,850);
            this.ctx.lineTo(500,650);
            this.ctx.stroke();

            this.ctx.restore();
        },
        testLineToLine(){

            let lineStyleArr = {
                strokeStyle:"RGBA(0,0,0,0.5)",
                lineWidth:1,
                lineJoin:"miter"

            };

            let myLine = new LineClass([{x:50,y:600},{x:250,y:600},{x:250,y:850},{x:500,y:850},{x:700,y:450},{x:1000,y:850}],lineStyleArr);
            let myLine2 = new LineClass([{x:50,y:200},{x:250,y:300},{x:250,y:450},{x:500,y:250},{x:700,y:450},{x:1000,y:450}],lineStyleArr);
            let myLine3 = new LineClass([{x:50,y:200},{x:250,y:800},{x:250,y:250},{x:500,y:950},{x:700,y:450},{x:1000,y:550}],lineStyleArr);
            let myLine4 = new LineClass([{x:20,y:240},{x:350,y:400},{x:150,y:250},{x:500,y:350},{x:200,y:450},{x:500,y:550}],lineStyleArr);
            let myLine5 = new LineClass([{x:50,y:340},{x:250,y:120},{x:250,y:300},{x:500,y:550},{x:600,y:450},{x:400,y:550}],lineStyleArr);
            let myArr = [];//循环蝌蚪线
            myArr.push(myLine);
            myArr.push(myLine2);
            myArr.push(myLine3);
            myArr.push(myLine4);
            myArr.push(myLine5);
            this.myArr = myArr;
            this.startAnimate2(myArr);
            
        },
        startAnimate(myLine){

            let _that = this;
            requestAnimationFrame(function step(){
                _that.ctx.clearRect(0,0,2000,2000);

                _that.ctx.beginPath();
                _that.ctx.lineWidth = 1;
                _that.ctx.moveTo(50,600);
                _that.ctx.lineTo(250,600);
                _that.ctx.lineTo(250,850);
                _that.ctx.lineTo(500,850);
                _that.ctx.lineTo(700,450);
                _that.ctx.lineTo(1000,850);
                _that.ctx.stroke();
                if(myLine.finallys === false){
                    myLine.draw(_that.ctx);
                }else{
                    cancelAnimationFrame(_that.animate);
                }
                
                _that.animate = requestAnimationFrame(step);
            
            });
        },
        startAnimate2(myArr){
            this.startAnimateBool = true;

            let _that = this;
            window.requestAnimationFrame(function step(){
                _that.ctx.clearRect(0,0,2000,2000);

                // _that.ctx.beginPath();
                // _that.ctx.lineWidth = 1;
                // _that.ctx.moveTo(50,600);
                // _that.ctx.lineTo(250,600);
                // _that.ctx.lineTo(250,850);
                // _that.ctx.lineTo(500,850);
                // _that.ctx.lineTo(700,450);
                // _that.ctx.lineTo(1000,850);
                // _that.ctx.stroke();
                for(let i=0;i<myArr.length;i++){
                    let myLine = myArr[i];
                    if(myLine.finallys === false){
                        myLine.cycleDraw(_that.ctx,5000);
                    }
                }
                
                
                _that.animate = window.requestAnimationFrame(step);
            
            });
        },
        stopAnimate(){//暂停动画
            let myArr = this.myArr;
            if(this.startAnimateBool === false){
                return;
            }
            this.startAnimateBool = false;
            window.cancelAnimationFrame(this.animate);
             
        },
        holdAnimate(){//继续动画
            if(this.startAnimateBool === true){
                return;
            }
            let myArr = this.myArr;
            for(let i=0;i<myArr.length;i++){
                let myLine = myArr[i];
                myLine.drawDate = + new Date();
            }
            this.startAnimate2(myArr);
        }
        

    },
}
</script>

<style>
    .canvas{
        position: absolute;
        left: 0;
        top: 0;
    }
    .bg{
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 100;
    }
</style>
``