标准五星红旗html（转自网上）
本帖最后由 依旧留恋 于 2019-12-9 21:28 编辑代码仅供参考，谢谢大家的帮助与指点。。。
转自网上
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>中国标准国旗</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
// 使用HTML5绘制标准五星红旗
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var width = canvas.width;
var height = width * 2 / 3;
var w = width / 30;//小网格的宽
context.fillStyle = "red";
context.fillRect(0, 0, width, height);
var maxR = 0.15, minR = 0.05;//
var maxX = 0.25, maxY = 0.25;//大五星的位置
var minX = ;
var minY = ;
// 画大 ☆
var ox = height * maxX, oy = height * maxY;
create5star(context, ox, oy, height * maxR, "#ff0", 0);//绘制五角星
// 画小 ★
for (var idx = 0; idx < 4; idx++) {
var sx = minX * height, sy = minY * height;
var theta = Math.atan((oy - sy) / (ox - sx));
create5star(context, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta);
}
//绘制五角星
/**
* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
* rotate:绕对称轴旋转rotate弧度
*/
function create5star(context, sx, sy, radius, color, rotato){
context.save();
context.fillStyle = color;
context.translate(sx, sy);//移动坐标原点
context.rotate(Math.PI + rotato);//旋转
context.beginPath();//创建路径
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {//画五角星的五条边
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(x * radius, y * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
</script>
</body>
</html>
本帖最后由 沙鱼 于 2019-12-9 20:45 编辑
https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=9e883ba0a9c379317d3d8e2fdbf49b7d/960a304e251f95ca37b06b10cf177f3e660952cb.jpg
旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。
五星之位置与画法如下：
1. 为便于确定五星之位置，先将旗面对分为四个相等的长方形，将左上方之长方形上下划为十等分，左右划为十五等分。
2. 大五角星的中心点，在该长方形上五下五、左五右十之处。其画法为：以此点为圆心，以三等分为半径作一圆。在此圆周上，定出五个等距离的点，其一点须位于圆之正上方。然后将此五点中各相隔的两点相联，使各成一直线。此五直线所构成之外轮廓线，即为所需之大五角星。五角星之一个角尖正向上方。
3. 四颗小五角星的中心点，第一点在该长方形上二下八、左十右五之处，第二点在上四下六、左十二右三之处，第三点在上七下三、左十二右三之处，第四点在上九下一、左十右五之处。其画法为：以以上四点为圆心，各以一等分为半径，分别作四个圆。在每个圆上各定出五个等距离的点，其中均须各有一点位于大五角星中心点与以上四个圆心的各联结线上。然后用构成大五角星的同样方法，构成小五角星。此四颗小五角星均各有一个角尖正对大五角星的中心点。 支持楼主 好是好，就是尺寸和五星的位置不大对 尺寸和位置不符合规定，违法:lol 谢谢老师的分享 郝阳谋 发表于 2019-12-9 20:20
四颗小星各有一个角尖正对大星的中心点
改过在拿出来！！！ 沙鱼 发表于 2019-12-9 20:42
旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径 ...
改过在拿出来！！！ 大神：代码怎么用啊？教一下好吗？
页:
[1]
2