Canvas---绘制三条不同颜色和宽度的平行线

绘制三条不同颜色和宽度的平行线

 

画布

<canvas width="600" height="400"></canvas>

画布加边框显示出来

    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>

获取canvas, 准备工具盒context

    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

 

画平行线，设置颜色ctx.strokeStyle, 设置线的宽度lineWidth

    /*画平行线*/
    ctx.beginPath();/*Kai*/
    /*蓝色  10px*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    /*描边*/
    ctx.stroke();

 

    /*红色 20px*/
    ctx.moveTo(100,200);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    /*描边*/
    ctx.stroke();


    /*绿色 30px*/
    ctx.moveTo(100,300);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    /*描边*/
    ctx.stroke();

 

对象的属性设置后，后面会覆盖前面，要注意