国庆假期，闲来无事，用HTML、C、Java、Python四种语言画国旗
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74<html>
<head>
<script>
var col=new Array("red","brown");
var ticker=0;
var step=0;
function drawBackground(){
var g=document.getElementById("background").getContext("2d");
var grd=g.createLinearGradient(-560+ticker, 0, 1400+ticker,0);
for (var i=0; i<10; i++)
grd.addColorStop(i/10,col[(i + step)%col.length]);
ticker=ticker+10;
if (ticker>=196){
ticker=0;
step++;
}
g.fillStyle=grd;
g.fillRect(0,0,1600,700);
}
function preperation(){
setInterval('drawBackground()',100);
}
</script>
<style type="text/css">
#myCanvas{
z-index:2;
position:absolute; left:0px; top:-5px;
}
#background{
z-index:1;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body onLoad="preperation()">
<canvas id="myCanvas" width="900" height="600" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="background" width="1600" height="700" ></canvas>
<script>
var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0); //五角星样品坐标xx数组
var y=new Array(-53,-17,-17,1,45,19,45,1,-17,-17,-53); //五角星样品坐标y数组
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); //获得画笔
//样品数组x轴坐标 a , 和y轴坐标 b
//指定位置[locationX,locationY]
//真实五角星的大小，与样品五角星尺寸之比 f
//五角星画完后，旋转的角度 rotation
function star(a,b,locationX,locationY,f,rotation){
ctx.save();//记录画图（画笔）的初始环境
ctx.translate(locationX,locationY);
ctx.rotate(rotation*Math.PI/180.0);
ctx.beginPath();
ctx.moveTo(Math.round(a[0]*f),Math.round(b[0]*f));
for (var i=1;i<a.length;i++)
ctx.lineTo(Math.round(a[i]*f),Math.round(b[i]*f));
ctx.closePath();
ctx.fillStyle="yellow";
ctx.fill();
ctx.restore();//还原画图（画笔）的初始环境
}
star(x,y,165,165,1.4,0);//画大五角星
star(x,y,301,65,0.5,30);//画小五角星
star(x,y,362,126,0.5,-30);//画小五角星
star(x,y,359,216,0.5,0);//画小五角星
star(x,y,301,273,0.5,30);//画小五角星
</script>
</body>
</html>
C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/* Declare Windows procedure */
LRESULT CALLBACK WindowProcedure (HWND, UINT, WPARAM, LPARAM);
void DrawFiveStarFlag(HDC hdc, int x, int y, int w);
void DrawFivePointedStar(HDC hdc, int x, int y, int r, float d);
/* Current app instance */
HINSTANCE hInst;
/* Make the class name into a global variable */
TCHAR szClassName[] = TEXT("WindowsApp");
int WINAPI
WinMain (HINSTANCE hThisInstance, HINSTANCE hPrevInstance, LPSTR lpszArgument, int nFunsterStil)
{
HWND hwnd; /* This is the handle for our window */
MSG messages; /* Here messages to the application are saved */
WNDCLASSEX wincl; /* Data structure for the windowclass */
/* Save this instance */
hInst = hThisInstance;
/* The Window structure */
wincl.hInstance = hThisInstance;
wincl.lpszClassName = szClassName;
wincl.lpfnWndProc = WindowProcedure; /* This function is called by windows */
wincl.style = CS_DBLCLKS; /* Catch double-clicks */
wincl.cbSize = sizeof (WNDCLASSEX);
/* Use default icon and mouse-pointer */
wincl.hIcon = LoadIcon (NULL, IDI_APPLICATION);
wincl.hIconSm = LoadIcon (NULL, IDI_APPLICATION);
wincl.hCursor = LoadCursor (NULL, IDC_ARROW);
wincl.lpszMenuName = NULL;
wincl.cbClsExtra = 0; /* No extra bytes after the window class */
wincl.cbWndExtra = 0; /* structure or the window instance */
/* Use Windows's default color as the background of the window */
wincl.hbrBackground = (HBRUSH)(COLOR_WINDOW+1);
/* Register the window class, and if it fails quit the program */
if (!RegisterClassEx (&wincl))
return 0;
/* The class is registered, let's create the program*/
hwnd = CreateWindowEx (
0, /* Extended possibilites for variation */
szClassName, /* Classname */
TEXT("TestPie"), /* Title Text */
WS_OVERLAPPEDWINDOW, /* default window */
CW_USEDEFAULT, /* Windows decides the position */
0, /* where the window ends up on the screen */
CW_USEDEFAULT, /* The programs width */
0, /* and height in pixels */
HWND_DESKTOP, /* The window is a child-window to desktop */
NULL, /* No menu */
hThisInstance, /* Program Instance handler */
NULL /* No Window Creation data */
);
/* Make the window visible on the screen */
ShowWindow (hwnd, nFunsterStil);
/* Run the message loop. It will run until GetMessage() returns 0 */
while (GetMessage (&messages, NULL, 0, 0))
{
/* Translate virtual-key messages into character messages */
TranslateMessage(&messages);
/* Send message to WindowProcedure */
DispatchMessage(&messages);
}
/* The program return-value is 0 - The value that PostQuitMessage() gave */
return messages.wParam;
}
/* This function is called by the Windows function DispatchMessage() */
LRESULT CALLBACK
WindowProcedure (HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
{
PAINTSTRUCT ps;
HDC hdc;
switch (message) /* handle the messages */
{
case WM_PAINT:
hdc = BeginPaint(hwnd, &ps);
/* TODO: Add any drawing code here... */
DrawFiveStarFlag(hdc, 50, 50, 300);
EndPaint(hwnd, &ps);
break;
case WM_DESTROY:
PostQuitMessage (0); /* send a WM_QUIT to the message queue */
break;
default: /* for messages that we don't deal with */
return DefWindowProc (hwnd, message, wParam, lParam);
}
return 0;
}
/* 画五角星
* 参数：hdc画图句柄，xy中心点坐标，r外圆半径，d偏斜角度（逆时针）
*/
void DrawFivePointedStar(HDC hdc, int x, int y, int r, float d)
{
float r0 = 0.381966*r; //内圆半径：r*sin(0.1*M_PI)/sin(0.7*M_PI)
int i;
POINT p[10];
//计算10个顶点的坐标（72度为实心五角星，144为空心五角星）
for(i=0; i<5; i++)
{
p[2*i].x = x + r*cos((i*72-18+d)*M_PI/180);
p[2*i].y = y + r*sin((i*72-18+d)*M_PI/180);
p[2*i+1].x = x + r0*cos((i*72+18+d)*M_PI/180);
p[2*i+1].y = y + r0*sin((i*72+18+d)*M_PI/180);
}
//画五角星
Polygon(hdc, p, 10);
}
/* 画五星红旗
* 参数：hdc画图句柄，xy旗左上角坐标，w旗宽
*/
void DrawFiveStarFlag(HDC hdc, int x, int y, int w)
{
COLORREF RED = RGB(255, 0, 0), YELLOW = RGB(255, 255, 0);
HPEN hPen1 = CreatePen(PS_SOLID, 1, RED), hPen2 = CreatePen(PS_SOLID, 1, YELLOW);
HBRUSH hBrush1 = CreateSolidBrush(RED), hBrush2 = CreateSolidBrush(YELLOW);
//画旗面
SelectObject(hdc, hPen1);
SelectObject(hdc, hBrush1);
Rectangle(hdc, x, y, x+w, y+2*w/3);
//画5星
SelectObject(hdc, hPen2);
SelectObject(hdc, hBrush2);
DrawFivePointedStar(hdc, x+w/6, y+w/6, w/10, 0); //大星
DrawFivePointedStar(hdc, x+w/3, y+w/15, w/30, 18); //4个小星，倾斜角度都是估的
DrawFivePointedStar(hdc, x+2*w/5, y+2*w/15, w/30, 45);
DrawFivePointedStar(hdc, x+2*w/5, y+7*w/30, w/30, 9);
DrawFivePointedStar(hdc, x+w/3, y+3*w/10, w/30, 27);
DeleteObject(hPen1);
DeleteObject(hPen2);
DeleteObject(hBrush1);
DeleteObject(hBrush2);
}Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.geom.GeneralPath;
import javax.swing.JFrame;
public class NationalFlag extends JFrame {
private int width = 288,height = width/3*2;
private double maxR = 0.15, minR = 0.05;
private double maxX = 0.50, maxY = 0.50;
private double[] minX = {0.75, 0.85, 0.85, 0.75};
private double[] minY = {0.35, 0.45, 0.60, 0.70};
public NationalFlag() {
setTitle("国旗 - by PotatoChipsNinja");
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public void paint(java.awt.Graphics graphics) {
super.paint(graphics);
java.awt.Graphics2D g = (java.awt.Graphics2D)graphics;
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
//棋面
g.setColor(java.awt.Color.red);
g.fillRect(50, 50, width, height);
g.setColor(java.awt.Color.yellow);
//画大星星
double ox = height*maxX, oy = height*maxY;
g.fill(createPentacle(ox,oy,height*maxR,-Math.PI/2));
//画小星星
for(int idx =0;idx < 4;idx ++){
double sx = minX[idx]*height, sy = minY[idx]*height;
double theta = Math.atan2(oy-sy,ox-sx);
g.fill(createPentacle(sx,sy,height*minR,theta));
}
}
/**
* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,其中某个顶点与中心的连线的偏移角度为theta(弧度)
*
* @return pentacle 一个☆
*/
public static java.awt.Shape createPentacle(double sx, double sy, double radius,double theta) {
final double arc = Math.PI / 5;
final double rad = Math.sin(Math.PI / 10) / Math.sin(3 * Math.PI / 10);
GeneralPath path = new GeneralPath();
path.moveTo(1, 0);
for (int idx = 0; idx < 5; idx++) {
path.lineTo(rad * Math.cos((1 + 2 * idx) * arc),rad * Math.sin((1 + 2 * idx) * arc));
path.lineTo(Math.cos(2 * (idx + 1) * arc),Math.sin(2 * (idx + 1) * arc));
}
path.closePath();
AffineTransform atf = AffineTransform.getScaleInstance(radius, radius);
atf.translate(sx / radius, sy / radius);
atf.rotate(theta);
return atf.createTransformedShape(path);
}
public static void main(String[] args) {
NationalFlag flag = new NationalFlag();
flag.setBounds(100, 100, 400, 400);
flag.setVisible(true);
}
}Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94#coding=utf-8
import turtle
import math
def draw_polygon(aTurtle, size=50, n=3):
''' 绘制正多边形
args:
aTurtle: turtle对象实例
size: int类型，正多边形的边长
n: int类型，是几边形
'''
for i in xrange(n):
aTurtle.forward(size)
aTurtle.left(360.0/n)
def draw_n_angle(aTurtle, size=50, num=5, color=None):
''' 绘制正n角形，默认为黄色
args:
aTurtle: turtle对象实例
size: int类型，正多角形的边长
n: int类型，是几角形
color: str， 图形颜色，默认不填色
'''
if color:
aTurtle.begin_fill()
aTurtle.fillcolor(color)
for i in xrange(num):
aTurtle.forward(size)
aTurtle.left(360.0/num)
aTurtle.forward(size)
aTurtle.right(2*360.0/num)
if color:
aTurtle.end_fill()
def draw_5_angle(aTurtle=None, start_pos=(0,0), end_pos=(0,10), radius=100, color=None):
''' 根据起始位置、结束位置和外接圆半径画五角星
args:
aTurtle: turtle对象实例
start_pos: int的二元tuple，要画的五角星的外接圆圆心
end_pos: int的二元tuple，圆心指向的位置坐标点
radius: 五角星外接圆半径
color: str， 图形颜色，默认不填色
'''
aTurtle = aTurtle or turtle.Turtle()
size = radius * math.sin(math.pi/5)/math.sin(math.pi*2/5)
aTurtle.left(math.degrees(math.atan2(end_pos[1]-start_pos[1], end_pos[0]-start_pos[0])))
aTurtle.penup()
aTurtle.goto(start_pos)
aTurtle.fd(radius)
aTurtle.pendown()
aTurtle.right(math.degrees(math.pi*9/10))
draw_n_angle(aTurtle, size, 5, color)
def draw_5_star_flag(times=20.0):
''' 绘制五星红旗
args:
times: 五星红旗的规格为30*20， times为倍数，默认大小为10倍， 即300*200
'''
width, height = 30*times, 20*times
# 初始化屏幕和海龟
window = turtle.Screen()
aTurtle = turtle.Turtle()
aTurtle.hideturtle()
aTurtle.speed(10)
# 画红旗
aTurtle.penup()
aTurtle.goto(-width/2, height/2)
aTurtle.pendown()
aTurtle.begin_fill()
aTurtle.fillcolor('red')
aTurtle.fd(width)
aTurtle.right(90)
aTurtle.fd(height)
aTurtle.right(90)
aTurtle.fd(width)
aTurtle.right(90)
aTurtle.fd(height)
aTurtle.right(90)
aTurtle.end_fill()
# 画大星星
draw_5_angle(aTurtle, start_pos=(-10*times, 5*times), end_pos=(-10*times, 8*times), radius=3*times, color='yellow')
# 画四个小星星
stars_start_pos = [(-5, 8), (-3, 6), (-3, 3), (-5, 1)]
for pos in stars_start_pos:
draw_5_angle(aTurtle, start_pos=(pos[0]*times, pos[1]*times), end_pos=(-10*times, 5*times), radius=1*times, color='yellow')
# 点击关闭窗口
window.exitonclick()
if __name__ == '__main__':
draw_5_star_flag()