用cavas画一个多边形的图

Posted 2020-11-21 米牙

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);
}