<!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>
转载请注明原文地址: https://www.6miu.com/read-37309.html
