【成图】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>美国星条旗圆饼 Draft4</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body onload="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=512;
const HEIGHT=512;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas'); canvas.width=WIDTH;canvas.height=HEIGHT;// 初始化canvas的绘图环境ctx=canvas.getContext('2d'); ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移// 准备stage=new Stage(); stage.init();// 开幕animate();
}// 播放动画
function animate(){ stage.update(); stage.paintBg(ctx);stage.paintFg(ctx); // 循环if(true){//sleep(100);window.requestAnimationFrame(animate); }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){ }// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 }// 画前景this.paintFg=function(ctx){// 底色/*ctx.save();ctx.fillStyle = "white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();*/const R=220;//基准尺寸// #1 美国星条旗ctx.save(); var r=R*1.00;ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.clip();const RED="rgb(166,31,37)";const WHITE="rgb(223,223,223)";const BLUE="rgb(33,45,83)";var colors=[RED,WHITE,BLUE];drawUsFlag(ctx,0,r/7/2*1.08,r*1.08,colors);ctx.restore();// #2 边缘加深ctx.save(); var r=R*1.00;var gnt=ctx.createRadialGradient(0,0,0,0,0,r);gnt.addColorStop(0,"rgba(120,120,120,0)");gnt.addColorStop(0.86,"rgba(120,120,120,0.1)");gnt.addColorStop(0.93,"rgba(120,120,120,0.25)");gnt.addColorStop(1,"rgba(120,120,120,0.5)");drawSolidCircle(ctx,0,0,r,gnt);ctx.restore();// #3 椭圆玻璃光ctx.save(); var r=R*0.87; var gnt=ctx.createLinearGradient(0,-r,0,0);gnt.addColorStop(0,"rgba(255,255,255,0.7)");gnt.addColorStop(0.5,"rgba(255,255,255,0.3)");gnt.addColorStop(1,"rgba(255,255,255,0.1)");ctx.fillStyle=gnt;drawTuoYuan(ctx,0,-r*0.48,r*1.8,r*1.3); ctx.fill();ctx.restore(); writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*------------------------------------------------------------------------函数：drawEllipse函数的套娃函数ctx：绘图上下文x:椭圆中心点横坐标y:椭圆中心点纵坐标width：椭圆宽height：椭圆高
------------------------------------------------------------------------*/
function drawTuoYuan(ctx,x,y,width,height){drawEllipse(ctx,x-width/2,y-height/2,width,height);
}/*------------------------------------------------------------------------函数：使用贝塞尔三次曲线拟近椭圆，该方法比原生的ellipse函数消耗小很多。ctx：绘图上下文x:椭圆左极点横坐标(注意不是中心点)y:椭圆左极点纵坐标(注意不是中心点)width：椭圆宽height：椭圆高注：该方法摘录自 张磊著《HTML5实验室-Canvas世界》，电子工业出版社出版
------------------------------------------------------------------------*/
function drawEllipse(ctx,x,y,width,height){var k=0.55228475;var ox=(width/2)*k;var oy=(height/2)*k;var xe=x+width;var ye=y+height;var xm=x+width/2;var ym=y+height/2;ctx.beginPath();ctx.moveTo(x,ym);ctx.bezierCurveTo(x,ym-oy,xm-ox,y,xm,y);ctx.bezierCurveTo(xm+ox,y,xe,ym-oy,xe,ym);ctx.bezierCurveTo(xe,ym+oy,xm+ox,ye,xm,ye);ctx.bezierCurveTo(xm-ox,ye,x,ym+oy,x,ym);ctx.closePath();
}/*----------------------------------------------------------
函数:指定一个中心点和半径，绘制标准的美国国旗
ctx:绘图上下文
x:中心横坐标
y:中心纵坐标
r:美国旗蓝色矩形的高度，是其它尺寸的基础
colors:存储红白蓝三色的数组
----------------------------------------------------------*/
function drawUsFlag(ctx,x,y,r,colors){ctx.save();var blueBlockRightBottom=createPt(x,y);// 蓝色块的右下角var c=r;// 左上角蓝色块的高度,按标准星条旗画法标记为cvar a=c/7*13;// c占7条高度，整旗高是13条，a即星条旗高度var b=a*19/10;// b是a的1.9倍，b即星条旗宽度var d=b*2/5;// d为五分之二的国旗宽度，d为左上角蓝色块的宽度// 绘制十三横条var flagCenter=createPt(x-d+b/2,y-c+a/2);// 旗帜中心fillHorizontalZebraRect(ctx,flagCenter.x,flagCenter.y,b,a,13,colors[0],colors[1]);// 绘制左上角蓝色方块var blueBlockCenter=createPt(x-d/2,y-c/2);// 蓝色方块中心ctx.fillStyle=colors[2];drawRect(ctx,blueBlockCenter.x,blueBlockCenter.y,d,c);ctx.fill();var h=d/12;// h为星星的横坐标间距var e=c/10;// e为星星的纵坐标间距var k=0.0616*a;// 左上角蓝色方块内白色星星的中心到尖角距离，即星星外接圆直径// 第一批画五行六列星星for(var i=0;i<6;i++){for(var j=0;j<5;j++){ ctx.fillStyle = colors[1];draw5Star(ctx,x-d+h+i*h*2,y-c+e+j*e*2,k/2);ctx.fill();}}// 第一批画五行四列星星for(var i=0;i<5;i++){for(var j=0;j<4;j++){ctx.fillStyle = colors[1];draw5Star(ctx,x-d+h*2+i*h*2,y-c+e*2+j*e*2,k/2);ctx.fill();}}ctx.restore();
}/*--------------------------------------------------
函数:绘制标准正五角星轮廓,可描边，可填充
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7);var arr=[0,0,0,0,0,0,0,0,0,0];// 顶五点for(var i=0;i<5;i++){var theta=i*Math.PI/5*2-Math.PI/10;var x1=R*Math.cos(theta)+x;var y1=R*Math.sin(theta)+y;arr[i*2]=createPt(x1,y1);}// 内五点for(var i=0;i<5;i++){var theta=i*Math.PI/5*2+Math.PI/10;var x1=r*Math.cos(theta)+x;var y1=r*Math.sin(theta)+y;arr[i*2+1]=createPt(x1,y1);}ctx.beginPath();for(var i=0;i<arr.length;i++){ctx.lineTo(arr[i].x,arr[i].y);}ctx.closePath();
}/*----------------------------------------------------------
函数:用于以横向间隔色条带的方式填充矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
count:条带数
color1:偶数色（从0开始)
color2:奇数色
----------------------------------------------------------*/
function fillHorizontalZebraRect(ctx,x,y,width,height,count,color1,color2){ctx.save();for(var i=0;i<count;i++){ctx.fillStyle=(i % 2==0)?color1:color2;ctx.fillRect(x-width/2, y-height/2+height/count*i, width, height/count); }ctx.restore();
}/*--------------------------------------------------
函数:绘制标准正N角星轮廓,可描边，可填充
ctx:绘图上下文
x:轮廓中心横坐标
y:轮廓中心纵坐标
n:角数
rout:中心到外角尖的距离
rin:中心到内角尖的距离
initAngle:初始角度
---------------------------------------------------*/
function drawNStar(ctx,x,y,n,rout,rin,initAngle){var arr=new Array(2*n);for(var i=0;i<n;i++){var theta=Math.PI*2/n*i+initAngle;var p=createPt2(x,y,rout,theta);arr[i*2]=p;}for(var i=0;i<n;i++){var theta=Math.PI*2/n*i+Math.PI/n+initAngle;var p=createPt2(x,y,rin,theta);arr[i*2+1]=p;}ctx.beginPath();for(var i=0;i<arr.length;i++){ctx.lineTo(arr[i].x,arr[i].y);}ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){ctx.beginPath();ctx.moveTo(x-width/2,y-height/2);ctx.lineTo(x+width/2,y-height/2);ctx.lineTo(x+width/2,y+height/2);ctx.lineTo(x-width/2,y+height/2);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){ctx.fillStyle=style;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();
}/*----------------------------------------------------------
函数:创建一个二维坐标点
baseX:基准点横坐标
baseY:基准点纵坐标
radius:当前点到基准点的距离
theta:当前点到基准点的角度
Pt即Point
----------------------------------------------------------*/
function createPt2(baseX,baseY,radius,theta){var retval={};retval.x=baseX+radius*Math.cos(theta);retval.y=baseY+radius*Math.sin(theta);return retval;
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {const date = Date.now();let currDate = null;while (currDate - date < milliSeconds) {currDate = Date.now();}
}/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){ctx.save();ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
《心愿》（又名《曾经的那些》）是王泽作词、作曲，
王泽、杨颖、乔媛和唐景莲演唱的校园风歌曲，
于1996年6月1日由麦罗音乐公司以单曲的形式发行。
个人以为当前的最好版本是由歌手方大路、阿美呀演绎的。歌词：
湖水是你的眼神
梦想满天星辰
心情是一个传说
亘古不变地等候
成长是一扇树叶的门
童年有一群亲爱的人
春天是一段路程
沧海桑田的拥有
那些我爱的人
那些离逝的风
那些永远的誓言一遍一遍
那些爱我的人
那些沉淀的泪
那些永远的誓言一遍一遍
湖水是你的眼神
梦想满天星辰
心情是一个传说
亘古不变地等候
成长是一扇树叶的门
童年有一群亲爱的人
春天是一段路程
沧海桑田的拥有
那些我爱的人
那些离逝的风
那些永远的誓言一遍一遍
那些爱我的人
那些沉淀的泪
那些永远的誓言一遍一遍
我们都曾有过一张天真而忧伤的脸
手握阳光我们望着遥远
轻轻的一天天一年又一年
长大间我们是否还会再唱起心愿
轻轻的一天天一年又一年
长大间我们是否还会再唱起心愿
长大间我们是否还会再唱起心愿
--------------------------------------------------------------*/
//-->
</script>END
