如何在多邊形的每個點上繪制一個圓並用不同的顏色填充該點？

Question

我有一個帶有坐標數組的多邊形，但是我想在每個坐標（例如圓）中繪制一個點，並用不同顏色的多邊形填充該點

我試圖填補這個圈子，但我認為這是不對的

    const drawPolygon = () => {
        context.clearRect(0,0,cw,ch)
        context.beginPath()
        context.moveTo(coordinates[0].x, coordinates[0].y)
        coordinates.forEach((item) => {
            context.lineTo(item.x, item.y)
            context.arc(item.x, item.y, 3, 0, Math.PI * 2, true)
        })
        context.closePath()
        context.stroke()
        context.fill()
    }

Answer 1

由於要更改填充顏色，因此需要為每個新形狀再次調用stroke()和fill() 。

 const canvas = document.createElement('canvas') const context = canvas.getContext('2d') const cw = canvas.width const ch = canvas.height const coordinates = [{x:20,y:20}, {x:270,y:40}, {x:230,y:130} , {x:50,y:90}] const drawPolygon = () => { context.clearRect(0,0,cw,ch) // Draw polygon context.fillStyle = 'rgba(255,0,0,.3)' context.beginPath() coordinates.forEach((item) => { context.lineTo(item.x, item.y) }) context.closePath() context.stroke() context.fill() // Draw coordinate circles context.fillStyle = 'rgba(0,0,255,.3)' coordinates.forEach((item) => { context.beginPath() context.arc(item.x, item.y, 13, 0, Math.PI * 2, true) context.stroke() context.fill() }) } drawPolygon() document.body.appendChild(canvas)