SVG, canvas, drawing line segments and filling polygon, rectangle, curve drawing and filling

Tips ： When the article is finished , Directories can be generated automatically , How to generate it, please refer to the help document on the right

List of articles

Catalog

List of articles

1. Understand two drawing techniques in web pages

（1）SVG

（2）canvas

（3） Size and coordinates of canvas

2. Draw line segments and fill polygons

3. Drawing of rectangle

4. Curve drawing and filling

---

---

---

1. Understand two drawing techniques in web pages

（1）SVG

（1）SVG It is a scalable vector pattern , It's based on XML And the language used to describe graphics ;

（2） It is different from the matrix image depicted by pixels （JPG、PNG、GIF）,SVG It has nothing to do with resolution ;

（3）SVG Images can be displayed through JS and DOM Operation to create and manipulate ;

（4）SVG There are some predefined shape elements , It can be used and operated by developers ： rectangular 、 circular 、 The ellipse 、 Line 、 Broken line 、 polygon 、 route

svg How to use ：
        （1）svg Files can be inserted directly into web pages , be called DOM Part of , And then use js and css To operate .

        （2）svg The code can be written in a separate file , And then use “img/object/iframe/embed” Labels inserting into web pages

        （3）css You can use it directly svg file .

        （4）svg It can also be converted to BASE64 code , As Data url Write to web page .

（1）SVG Refers to scalable vector graphics (Scalable Vector Graphics).
（2）SVG Used to define vector based graphics for networks .
（3）SVG Use XML Format definition drawing .
（4）SVG When the image is enlarged or changed in size, the image quality will not be lost .
（5）SVG Is the standard of the World Wide Web Alliance .
（6）SVG And DOM and XSL And so on. W3C Standards are a whole .

（2）canvas

canvas： canvas ,h5 The new label ;

        （1）canvas It doesn't have any appearance , Just create a Sketchpad in the document ;

        （2）ie9 Previous version I won't support it canvas;

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

        （4） On canvas getContext() Method returns a “ Draw context ” object ; Most canvas paintings API From this object ; That is to say, canvas element and its context object are two completely different concepts ; When the method is called , The parameters passed are “2d”, That is to say getContext('2d'), You can draw two-dimensional images on the canvas ; 3d Drawing is relatively complicated , The specific implementation is still in the specification ;

（3） Size and coordinates of canvas

        – The upper left corner of the canvas (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 ;

2. Draw line segments and fill polygons

        （1） Drawing line segments API Is the method of the context object ;

        （2）beginPath： Start Define a new path ;

        （3）moveTo： Start defining a new sub path , The method The starting point of the line segment is determined ;

        （4）lineTo： The above The defined starting point of the line segment is connected with the specified new point ;

        （5） Here is just a good idea , No graphics have been drawn on the canvas ;

        （6）fill()： Fill area , At this point, it's just filling , The starting point and the ending point are not connected ;

        （7）closePath： Will connect the starting point and the ending point ;

        （8）stroke()： Start Drawing graphics , All sub routes under the current path will be drawn ;

        （9） If you want to continue Draw a new path , Remember call beginPath() Method ;

Cases such as ：

 <style>
        #box{
            border: 1px gray solid;
        }
    </style>
    <canvas id="box" width="600" height="500"> 123456</canvas>

  <script>
        var canvas=document.querySelector('#box');
        var ctx=canvas.getContext("2d") //Context  Context 
        ctx.lineWidth=10 // Line width 
        ctx.strokeStyle="red" // line color 
        ctx.moveTo(100,100)
        ctx.lineTo(300,300)

        ctx.moveTo(400,400)
        ctx.lineTo(100,100)

        ctx.moveTo(400,400)
        ctx.lineTo(300,300)

        ctx.stroke()



        // lineTo() I will take the last one as the starting point of this one , If there is no end of the last time, there is no starting point of this time 
        ctx.lineTo(100,100)
        ctx.lineTo(200,200)
        ctx.lineTo(300,300)
    </script>

The effect is as follows ：

3. Drawing of rectangle

（1）rect()： Add an arc to the current path ;

         grammar ：context.rect(x,y,width,height);

         Four parameters ： Starting point coordinates x,y： Top left coordinates ; Width width： The width of the rectangle ; Height height： The height of the rectangle ;

（2）strokeRect() Method can draw a rectangle directly ;

         grammar ：context.strokeRect(x,y,width,height);

for example ：

 <style>
        #box{
            border: 1px gray solid;
        }
    </style>
    <canvas id="box" width="600" height="500"> 123456</canvas>

    <script>
        var canvas=document.querySelector('#box');
        var cdx=canvas.getContext("2d") //Context  Context 
         //  Draw a rectangle 
        cdx.rect(200,100,300,400) // The trajectory 
        cdx.fillStyle="orange"
        cdx.fill()
        cdx.stroke()
    </script>   

Running results ：

4. Curve drawing and filling

arc()： Add an arc to the current path ;

grammar ：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Parameters	describe
x	The center of a circle x coordinate .
y	The center of a circle y coordinate .
r	The radius of the circle .
sAngle	Starting angle , In radians .（ The three o'clock position of the circle of the arc is 0 degree ）.
eAngle	End angle , In radians .
counterclockwise	Optional . Specify whether the drawing should be counter clockwise or clockwise

The case is as follows :

    <style>
        #box{
            border: 1px gray solid;
        }
    </style>
     <canvas id="box" width="600" height="500"> 123456</canvas>
    
    <script>
          var canvas=document.querySelector('#box');
          var cdx=canvas.getContext("2d") //Context  Context 
          let deg=Math.PI/180
          cdx.arc(300,250,200,0*deg,360*deg,false)
          cdx.stroke()
     </script>

Running results ：