1. Simple drawing on canvas

1.1 Initializing a Simple Canvas Canvas

<canvas id="canvas" width="200px" height="200px" ref="canvas" style="border: 1px solid #999;" ></canvas>

// Get the canvas element
this.canvas = document.getElementById('tutorial')
// Get the 2d context for drawing
this.ctx = this.canvas.getContext('2d')
Copy the code

1.2 Draw simple graphics on canvas

        // Start drawing simple lines
        ctx3.moveTo(50.150)
        ctx3.lineTo(150.50)
        ctx3.stroke()
Copy the code

1.3 Canvas Rectangle (strokeReact for stroke and fillReact for fill rectangle)

// There are two common ways to draw a canvas rectangle:
// Use a straight line to draw 1
    this.ctx.moveTo(150.50)
    this.ctx.lineTo(150.150)
    this.ctx.lineTo(50.150)
    this.ctx.lineTo(150.50)
    this.ctx.strokeStyle = "# 999999"
    this.ctx.stroke()
    
// 2 Use the canvas method react
this.ctx.strokeStyle = "#ff0000"
this.ctx.strokeRect(50.50.200.200)
Copy the code

1.4 Draw regular polygons (or circles) according to trigonometric functions

    // The polygon encapsulates the function
    createPolygon(ctx, n, dx, dy, size) {
            ctx.beginPath()
            let degree = (2 * Math.PI)/n
            for(var i = 0; i< n; i++) {
                let x = Math.cos(i * degree)
                let y = Math.sin(i * degree)
                console.log(x*size + dx, y * size + dy)
                ctx.lineTo(x*size + dx, y * size + dy)
            }
            ctx.closePath()
        }
    // Call the method (n > 60 is basically a circle)
    this.ctx.fillStyle = 'HotPink'
        this.createPolygon(this.ctx, 3.100.100.60)
        this.ctx.fill()
        this.ctx.stroke()
Copy the code

1.5 Draw a circle

// Draw the radius of the circle arc() x
this.ctx.beginPath()
            this.ctx.arc(100.100.50.0*Math.PI/180.360*Math.PI/180.true)
            this.ctx.closePath()
            this.ctx.fillStyle = "HotPink"
            this.ctx.fill()
            
// Draw a fan
 this.ctx.beginPath()
            this.ctx.arc(100.100.50.0*Math.PI/180.60*Math.PI/180.true)
            this.ctx.closePath()
            this.ctx.fillStyle = "HotPink"
            this.ctx.fill()
Copy the code

1.6 Draw a simple pie chart with the information you have learned

count: [30.60.50.90.60.70].colors: ['#eeeeee'.'HotPink'.'red'.'green'.'blue'.'#d4d4d5']

if(this.count && this.count.length > 0) {
                let allcount = this.count.reduce((a, b) = > {
                    return a + b
                })
                let newdegree = 0
                this.count.forEach((p, index) = > {
                    if(index < 6) {
                        this.ctx.beginPath()
                        this.ctx.moveTo(100.100)
                        let jd = p/allcount * 2 * Math.PI
                        this.ctx.arc(100.100.50, newdegree, jd + newdegree, false)
                        this.ctx.closePath()
                        this.ctx.fillStyle = this.colors[index]
                        this.ctx.fill()
                        newdegree += jd
                    }
                })
            }

Copy the code