Learn about canvas

Two drawing techniques in web pages ：1、SVG Vectorgraph   2、canvas

SVG Vectorgraph : Is to use a label code to draw pictures

canvas ： canvas ,h5 New technology , use js To draw

They are all code , Take up very little memory ; however img It's a picture. , It's picture coding .

Be careful ： The width and height of the canvas should be canvas Property settings for , Don't go straight to css It is defined ;

canvas It doesn't have any appearance , Just create a Sketchpad in the document .

Coordinates of canvas ： The canvas is in the upper left corner of the browser's visible area (0, 0) It's the origin of the coordinates ; To the right X The coordinates of the axis are increasing ; Down is Y The coordinates of the axis are increasing .

canvas How to draw ？

1、 Write a canvas label

2、 Get the created canvas Elements

3、canvas spot getContext("2d") Get one “ Draw context ” object

4、 This object calls the corresponding method , Draw lines or colors .

Small example ：

 <canvas id="cav" width="400" height="400"></canvas>
<script>
    var cav=document.querySelector("#cav")
    var cxt=cav.getContext("2d")
    cxt.moveTo(200,200)// Determine the starting point of the line segment 
    cxt.lineTo(300,300)// Connect the starting point of the line segment defined above with the new point specified here 
    cxt.moveTo(300,300)
    cxt.lineTo(400,200)
    cxt.strokeStyle="yellow" // Change the line segment color 
    cxt.lineWidth=10 // Change the thickness of the line segment 
    cxt.stroke() // Drawing pictures 
</script>

Page effects ：

Need to add a little ： About lineTo() This method , Yes, it will moveTo() Set the starting point and current lineTo Connect the points of ; But when there is no setting moveTo() when ,lineTo() The end point of the previous line segment will be taken as the starting point , If there is no last destination , There is no starting point for this time .

canvas What scenarios apply ？

Dual screen interaction     Big data page     game     advertisement     Special effects .......