<!DOCTYPE html>
<html>
<body>
输入国旗宽度:<input type="text" id="flag_width" value="400"></input>
<input type="button" onclick="DrawFlagCanvas()" value="开始绘制(canvas)"></input>
<input type="button" onclick="DrawFlagSvg()" value="开始绘制(svg)"></input><br />
<canvas id="myCanvas" width="0" height="0" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="main" width="1500" height="900" style="margin-top:20">
</svg>
</body>
<script>
function CreateFiveAngle(radius,angle,x,y,svg,width)
{
var r=radius;
var begin_angle = 0;
var point1 = {x:Math.cos(begin_angle*2*Math.PI/360+angle)*r,y:Math.sin(begin_angle*2*Math.PI/360+angle)*r};
begin_angle += 72;
var point2 = {x:Math.cos(begin_angle*2*Math.PI/360+angle)*r,y:Math.sin(begin_angle*2*Math.PI/360+angle)*r};
begin_angle += 72;
var point3 = {x:Math.cos(begin_angle*2*Math.PI/360+angle)*r,y:Math.sin(begin_angle*2*Math.PI/360+angle)*r};
begin_angle += 72;
var point4 = {x:Math.cos(begin_angle*2*Math.PI/360+angle)*r,y:Math.sin(begin_angle*2*Math.PI/360+angle)*r};
begin_angle += 72;
var point5 = {x:Math.cos(begin_angle*2*Math.PI/360+angle)*r,y:Math.sin(begin_angle*2*Math.PI/360+angle)*r};
var pts = [point1,point3,point5,point2,point4].map(function(coordinate){return (coordinate.x+x)+","+(-coordinate.y+y)}).join(" ");
return pts;
/*
var circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" );
circle.setAttribute("cx",point1.x+x);
circle.setAttribute("cy",-point1.y+y);
circle.setAttribute("r","5");
circle.setAttribute("fill","blue");
svg.appendChild(circle);
var circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" );
circle.setAttribute("cx",point2.x+x);
circle.setAttribute("cy",-point2.y+y);
circle.setAttribute("r","5");
circle.setAttribute("fill","green");
svg.appendChild(circle);
var line1 = document.createElementNS( "http://www.w3.org/2000/svg", "line" );
line1.setAttribute("x1",point1.x+x);
line1.setAttribute("y1",-point1.y+y);
line1.setAttribute("x2",width/30*5);
line1.setAttribute("y2",width/30*5);
line1.setAttribute("style","stroke:rgb(99,99,99);stroke-width:2");
svg.appendChild(line1);
*/
}
function CreateFlag()
{
var coordinate = {canvas:{},star:[]};
console.clear();
var width = document.getElementById("flag_width").value;
var unit = width/30;
var svg = document.getElementById("main");
svg.innerHTML = "";
coordinate.canvas.width = unit*30;
coordinate.canvas.height = unit*20;
coordinate.star[0] = CreateFiveAngle(unit*3,Math.PI/2,unit*5,unit*5,svg,width);
coordinate.star[1] = CreateFiveAngle(unit*1,Math.PI+Math.atan(3.0/5),unit*10,unit*2,svg,width);
coordinate.star[2] = CreateFiveAngle(unit*1,Math.PI+Math.atan(1.0/7),unit*12,unit*4,svg,width);
coordinate.star[3] = CreateFiveAngle(unit*1,Math.PI-Math.atan(2.0/7),unit*12,unit*7,svg,width);
coordinate.star[4] = CreateFiveAngle(unit*1,Math.PI-Math.atan(4.0/5),unit*10,unit*9,svg,width);
return coordinate;
//var link = document.getElementById("save");
//link.href = DownLoad();
}
function polygon(poly_str, context) {
context.beginPath();
var poly = poly_str.split(" ").map(function(xx)
{
return {x:xx.split(",")[0],y:xx.split(",")[1]};
});
console.log(poly);
context.moveTo(poly[0].x, poly[0].y);
for (var i = 0; i < poly.length; i ++) {
context.lineTo(parseInt(poly[i].x), parseInt(poly[i].y));
//console.log(poly[i].x, poly[i].y);
}
context.closePath();
//context.stroke();
context.fill();
}
function DrawFlagCanvas()
{
/*
var svg = document.getElementById("main");
var svgXml = svg.innerHTML;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
//image.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svgXml));
//image.src = 'data:image/svg+xml;base64,' + window.btoa(svgXml);
*/
var coordinate = CreateFlag();
var canvas = document.getElementById('myCanvas'); //准备空画布
var width = document.getElementById("flag_width").value;
canvas.width = coordinate.canvas.width;
canvas.height = coordinate.canvas.height;
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
//context.drawImage(image, 0, 0);
context.fillStyle="red";
context.fillRect(0,0,canvas.width,canvas.height);
context.fillStyle="yellow";
for(i=0;i<coordinate.star.length;i++)
{
polygon(coordinate.star[i],context);
}
//document.append(canvas);
//return image.src;//canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
}
function DrawFlagSvg()
{
var coordinate = CreateFlag();
var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
rect.setAttribute("width",coordinate.canvas.width);
rect.setAttribute("height",coordinate.canvas.height);
rect.setAttribute("fill","red");
var svg = document.getElementById("main");
svg.appendChild(rect);
for(i=0;i<coordinate.star.length;i++)
{
var polygon = document.createElementNS( "http://www.w3.org/2000/svg", "polygon" );
polygon.setAttribute("points",coordinate.star[i]);
polygon.setAttribute("fill","yellow");
svg.appendChild(polygon);
}
}
//console.log((Math.PI+Math.atan(3.0/5))*57.3);
//console.log((Math.PI+Math.atan(1.0/7))*57.3);
//console.log((Math.PI-Math.atan(-2.0/7))*57.3);
//console.log((Math.PI-Math.atan(-4.0/5))*57.3);
//DrawFlag();
</script>
</html>
以下是运行结果：