<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123456789</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="width: 1800px; margin: 0 auto; position: relative; ">
<canvas id="myCanvas" width="1800" height="900"></canvas>
<div class="TPY" >
<p>特派員</p>
</div>
<div class="TPY1" >
<p>扶貧</p>
</div>
<div class="TPY2" >
<p>科技成果</p>
</div>
<div class="TPY3" >
<p>星創天地</p>
</div>
</div>
<script> var MyCanvas = document.getElementByIdx-x-x-x("myCanvas"); var Graph = MyCanvas.getContext("2d"); //能量方格
function energyBlank(a,b,number,color)
{ //a爲起點弧度，b爲終點弧度，number爲能量方格的數量
Graduate(a,b,430+10*number,color);
Graduate(a,b,430,"#062e48");
for(var i=0;i<number;i++){
circle(10*i+440,"#062e48",3);
}
}
energyBlank(344.3,345.7,16,"yellow");
energyBlank(10.3,11.7,16,"blue");
energyBlank(164.3,165.7,16,"red");
energyBlank(190.3,191.7,16,"pink");
//算出線條的數量
for(var i=0;i<180;i++){
curve(2*i,2*(i+1),1000);
} //線圈弧形 function curve(a,b,r){
Graph.beginPath();
Graph.moveTo(900,450);
Graph.arc(900,450,r,rads(a),rads(b),false);
Graph.closePath();
Graph.lineWidth=1;
//定義變量 canvasGradient 弧型線中心處的漸變效果 以（900,450,0,900,450,r）x座標（900）、y座標（450）、半徑（0）到半徑爲r的外圓（圓心座標點同爲900,450）
var canvasGradient = Graph.createRadialGradient(900,450,0,900,450,r);
//從0-0.2的位置的漸變
canvasGradient.addColorStop(0,"rgba(0,0,0,0)");
canvasGradient.addColorStop(0.2,"rgba(0,0,0,0)");
//從0.2（開始）-0.3（結束）的位置的漸變
canvasGradient.addColorStop(0.2, "#062e48");
canvasGradient.addColorStop(0.3, "#0c3352");
canvasGradient.addColorStop(1, "#1d455f");
Graph.strokeStyle = canvasGradient;
Graph.stroke();
}
function rads(x){
return Math.PI*x/180;
} //弧線上面的圓線
function circle(r,color,line)
{
Graph.beginPath();
Graph.strokeStyle=color;
Graph.lineWidth=line;
Graph.arc(900,450,r,0,2*Math.PI);
Graph.stroke();
}
//線的屬性（半徑，顏色，寬度）
circle(720,"#1d455f",1);
circle(670,"#1d455f",1);
circle(420,"#1d455f",1);
//四個角落遮罩
function shade(a,b,c,d,e,f){
Graph.beginPath();
Graph.moveTo(a,b);
Graph.lineTo(c,d);
Graph.lineTo(e,f);
Graph.strokeStyle = "#062e48";
Graph.fillStyle = "#062e48";
//Graph.closePath();/*可有可無 關閉繪製的路徑*/
Graph.fill();
Graph.stroke();
}
//四個角落的遮罩圖
shade(0,0,0,320,520,0);
shade(0,900,250,900,0,760);
shade(1800,0,1550,0,1800,140);
shade(1800,900,1550,900,1800,280);
//四個區域的方格能量
function Graduate(a,b,r,color)
{
Graph.beginPath();
Graph.moveTo(900,450);
Graph.arc(900,450,r,rads(a),rads(b),false);
Graph.closePath();
Graph.strokeStyle = "#062e48";
Graph.stroke();
//該對象的作用域是以(900,450)爲圓心、半徑爲0px的內圓和以(950,450)爲圓心、半徑爲r的外圓之間的環狀區域
var canvasGradient = Graph.createRadialGradient(900,450,410,900,450,670);
canvasGradient.addColorStop(0, "#062e48");
canvasGradient.addColorStop(1, color);
Graph.fillStyle = canvasGradient;
Graph.fill();
}
//能量格文字
var textArr=["xxxxx"];
var num = 2*Math.PI/360;
Graph.translate(900,450);
function angle(Txtangle)
{
for(var i=0;i<1;i++){
Graph.save();
Graph.beginPath();
Graph.rotate((i*2+Txtangle)*num);
Graph.fillStyle="#fff";
Graph.font="14px 宋體";
Graph.fillText(textArr[i],600,0);
Graph.restore();
Graph.stroke();
}
}
angle(11.7);
angle(327.7);
angle(191.7);
angle(147.7);
</script>
</body>
</html>
