【原生javascript】canvas渐变色

canvas不能通过css样式改变宽高，只能在标签内改变

<script type="text/javascript">

    /*
    
    canvas绘图步骤
    1.先落笔，站到落笔点的坐标
    2.落笔，然后连线
    3.描边

     */

     //获取canves画布
    var canvas =document.querySelector("canvas");

     //获取绘图上下文，
    var ctx=canvas.getContext("2d");

    /*
    var lgd = ctx.createLinearGradient(x1,y1,x2,y2);
    四个参数分别表示起始横纵坐标
     */
    var lgd = ctx.createLinearGradient(100,50,300,50);
    // 添加起始颜色
    lgd.addColorStop(0, "red");
    // 添加结束颜色
    lgd.addColorStop(1, "black");
    // 设置划线渐变色
    ctx.strokeStyle = lgd
    // 设置线宽
    ctx.lineWidth = "50";
    // 1.落笔
    ctx.moveTo(100, 200);
    // 2.连线
    ctx.lineTo(300,250);
    // 3.描边
    ctx.stroke()

 </script>