Canvas study notes

html

<canvas style="border: solid 1px red" id="cvs"><canvas>

js

Draw a line

let cvs = document.querySelect('#cvs');  //  Get canvas elements 

let ctx = ctx.getContent('2d'); // Get toolset 

ctx.moveTo(40, 40); // (x, y)   Select the starting point 

ctx.lineTo(80, 80); //  Draw the line to the target point 
//  At this time, all operations are only saved in memory , Not displayed on the page 

ctx.storke(); //  draw , Make the above content appear on the page 

Draw the triangle and change the color 、 Line width

    var cvs = document.getElementById('cvs');    //  Get canvas elements 

    var ctx = cvs.getContext("2d");    //   Get toolset 


    ctx.moveTo(50, 50);    //  Locate the start position 

    ctx.lineTo(150, 50);   //  The first point 

    ctx.lineTo(80, 100);   //  Second points 

    ctx.closePath();  //  Closed path ,  It can also be used here  ctx.lineTo(50, 50)  The effect is the same 

    ctx.strokeStyle = 'red';    //  Set the color of the drawing 

    ctx.lineWidth = 20;    //  Set line width 

    ctx.stroke(); //  draw