1.效果圖：

2.html

<canvas id="polygon" width="600" height="600">
    <p>Current Price: 25.51</p>
</canvas>

3.js

window.onload=()=>{
    ‘use strict‘;
    var
        canvas2 = document.getElementById(‘polygon‘),
        ctx2 = canvas2.getContext(‘2d‘);
    ctx2.clearRect(0, 0, 600, 600); // 擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區域變為透明
    ctx2.fillStyle = ‘#4DC777‘; // 設置顏色
    ctx2.fillRect(0, 0, 600, 600);
    ctx2.translate(300,300);
    var path2=new Path2D();
    path2.arc(0, 0, 50, 0, Math.PI*2, false);
    path2.moveTo(100,0)
    path2.arc(0, 0, 100, 0, Math.PI*2, false);
    path2.moveTo(150,0)
    path2.arc(0, 0, 150, 0, Math.PI*2, false);
    path2.moveTo(200,0)
    path2.arc(0, 0, 200, 0, Math.PI*2, false);

    path2.moveTo(200,0);
    path2.lineTo(-200,0);
    path2.moveTo(141.4,141.4);
    path2.lineTo(-141.4,-141.4);
    path2.moveTo(0,200);
    path2.lineTo(0,-200);
    path2.moveTo(141.4,-141.4);
    path2.lineTo(-141.4,141.4);
    ctx2.strokeStyle = ‘#fff‘;
    ctx2.stroke(path2);

    var path3=new Path2D();
    path3.moveTo(200,0);
    path3.lineTo(110,110);
    path3.lineTo(0,148);
    path3.lineTo(-110,110);
    path3.lineTo(-155,0);
    path3.lineTo(-127,-127);
    path3.lineTo(0,-135);
    path3.lineTo(141,-141)
    path3.lineTo(200,0);
    ctx2.fillStyle="rgba(131,242,160,.5)";
    ctx2.fill(path3);
}

用cavas畫一個多邊形的圖