【Canvas与旗帜】红底蓝带十字旗
【成图】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>红底蓝带十字旗 Draft1</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=210;//基准尺寸 // 第一圈 ctx.save(); ctx.shadowOffsetX=-R/210*6; // 阴影 ctx.shadowOffsetY=R/210*6; ctx.shadowColor="lightgrey"; ctx.shadowBlur=R/210*6; var r=R*1.00; var w=2*r;// 高宽 var h=w/3*2.1; var gnt=ctx.createLinearGradient(0,-h/2,0,h/2); gnt.addColorStop(0,"white"); gnt.addColorStop(0.1,"lightgrey"); gnt.addColorStop(0.5,"lightgrey"); gnt.addColorStop(0.9,"lightgrey"); gnt.addColorStop(1,"lightgrey"); ctx.fillStyle=gnt; drawRoundRect(ctx,0,0,w,h,R/6+0.02*R);// 淡灰外框 ctx.fill(); ctx.restore(); // 第二圈 ctx.save(); var r=R*1.00; var w=2*r;// 高宽 var h=w/3*2; drawRoundRect(ctx,0,0,w,h,R/8);// 限制范围 ctx.clip(); ctx.fillStyle="rgb(236,28,34)";// 红底 drawRect(ctx,0,0,w,h); ctx.fill(); ctx.fillStyle="white";// 横白带 drawRect(ctx,0,0,w,h/4); ctx.fill(); ctx.fillStyle="white";// 竖白带 drawRect(ctx,0,0,h/4,h); ctx.fill(); ctx.fillStyle="rgb(35,28,80)";// 横蓝带 drawRect(ctx,0,0,w,h/8); ctx.fill(); ctx.fillStyle="rgb(35,28,80)";// 竖蓝带 drawRect(ctx,0,0,h/8,h); ctx.fill(); ctx.restore(); writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权 } } /*---------------------------------------------------------- 函数:用于绘制圆角矩形 ctx:绘图上下文 x:矩形中心横坐标 y:矩形中心纵坐标 width:矩形宽 height:矩形高 radius:圆角半径 ----------------------------------------------------------*/ function drawRoundRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x-width/2+radius,y-height/2); ctx.lineTo(x+width/2-radius,y-height/2); ctx.arcTo(x+width/2,y-height/2,x+width/2,y-height/2+radius,radius); ctx.lineTo(x+width/2,y-height/2+radius); ctx.lineTo(x+width/2,y+height/2-radius); ctx.arcTo(x+width/2,y+height/2,x+width/2-radius,y+height/2,radius); ctx.lineTo(x+width/2-radius,y+height/2); ctx.lineTo(x-width/2+radius,y+height/2); ctx.arcTo(x-width/2,y+height/2,x-width/2,y+height/2-radius,radius); ctx.lineTo(x-width/2,y+height/2-radius); ctx.lineTo(x-width/2,y-height/2+radius); ctx.arcTo(x-width/2,y-height/2,x-width/2+radius,y-height/2,radius); 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(); } /*---------------------------------------------------------- 函数:创建一个二维坐标点 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(); } /*------------------------------------------------------------- 《美丽的梭罗河》 （另译为：桫椤河）（印度尼西亚语：Bengawan Solo） 是一首印度尼西亚民歌风的音乐作品， 除了风行于印度尼西亚本国以外， 二战后在日本、中国大陆、香港、台湾等地均有影响。 尤其是在中国大陆，已经成为耳熟能详的歌曲之一。 这首歌在印度尼西亚语中的原名为Bengawan Solo， 在西方语言中一般保留这个名称不译。 印尼语 Bengawan Solo, riwayatmu ini sedari dulu jadi perhatian insani musim kemarau, tak seberapa airmu di musim hujan air meluap sampai jauh ... Mata airmu dari Solo terkurung gunung seribu air mengalir sampai jauh akhirnya ke laut ... Itu perahu, riwayatmu dulu kaum pedagang s'lalu naik itu perahu 中文歌词 美丽的梭罗河，我为你歌唱！你的光荣历史，我永远记在心上。 旱季来临，你轻轻流淌，雨季时波涛滚滚，你流向远方。 你的源泉来自梭罗，万重山送你一路前往，滚滚的波涛流向远方，一直流入海洋。 你的历史就是一只船，商人们乘船远航在美丽的河面上。 你的源泉来自梭罗，万重山送你一路前往，滚滚的波涛流向远方，一直流入海洋。 美丽的梭罗河，我为你歌唱！你的光荣历史，我永远记在心上。 --------------------------------------------------------------*/ //--> </script>
END
浙公网安备 33010602011771号