1.效果图:
2.html
<canvas id="polygon" width="600" height="600">
<p>Current Price: 25.51</p>
</canvas>
3.js
window.οnlοad=()=>{
'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);
}