【Canvas与艺术】十角大楼

avatar
作者
筋斗云
阅读量:0

【成图】

【代码】

<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head>      <title>十角大楼</title>      <style type="text/css">      .centerlize{         margin:0 auto;         width:1200px;      }      </style>      </head>       <body οnlοad="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.fillStyle = "white";         ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);          // L的两端颜色         var colors=[["red","rgb(255,181,181)"],                     ["orange","rgb(255,244,193)"],                     ["yellow","rgb(255,255,206)"],                     ["green","rgb(232,255,196)"],                     ["aqua","rgb(217,255,255)"],                     ["blue","rgb(196,225,255)"],                     ["navy","rgb(221,221,255)"],                     ["fuchsia","rgb(255,191,255)"],                     ["purple","rgb(230,202,255)"],                     ["grey","rgb(240,240,240)"],                                         ];          const N=10;         var r=80;         for(var i=0;i<N;i++){             var theta=Math.PI*2/N*i;             var a=createPt(r*Math.cos(theta),r*Math.sin(theta));             var alpha=Math.PI/N;              var rad=r/4/Math.sin(alpha);             var angle=theta+Math.PI/2-alpha;             var b=createPt(a.x+rad*Math.cos(angle),a.y+rad*Math.sin(angle));              rad=r*3*Math.sin(alpha);             angle+=Math.PI/N*2;             var c=createPt(b.x+rad*Math.cos(angle),b.y+rad*Math.sin(angle));              rad=r*4*Math.sin(alpha)-r/4/Math.sin(alpha);             angle+=Math.PI/N*2;             var d=createPt(c.x+rad*Math.cos(angle),c.y+rad*Math.sin(angle));              rad=r/4/Math.sin(alpha);             angle+=Math.PI/N*2;             var e=createPt(d.x+rad*Math.cos(angle),d.y+rad*Math.sin(angle));              rad=r*3*Math.sin(alpha);             angle+=Math.PI-Math.PI/N*2;             var f=createPt(e.x+rad*Math.cos(angle),e.y+rad*Math.sin(angle));              // 渐变色             var gnt=ctx.createLinearGradient(b.x,b.y,d.x,d.y);                         gnt.addColorStop(0.4,colors[i][0]);             gnt.addColorStop(0.9,colors[i][1]);             ctx.fillStyle=gnt;              // 填充绘图                 ctx.beginPath();             ctx.moveTo(a.x,a.y);             ctx.lineTo(b.x,b.y);             ctx.lineTo(c.x,c.y);             ctx.lineTo(d.x,d.y);             ctx.lineTo(e.x,e.y);             ctx.lineTo(f.x,f.y);             ctx.closePath();             ctx.fill();         }          writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火原创","8px consolas","lightgrey");// 版权     } }   /*---------------------------------------------------------- 函数:创建一个二维坐标点 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(); }  /*------------------------------------------------------------- 鲁迅说哪里是什么天才,我只是把别人喝咖啡的时间用在了学习上; 我觉得当年自己正好倒过来,把别人学习的时间用在了泡论坛上。   与泡论坛类似的,追星,追剧,看电影,逛街购物,刷手机,其实都类似,  它们并不关心你花了时间是否离成功近一些,它们只在意把你兜里的钱拿走,  至少也要吸引你的注意力,消耗你的时间。  人生不过三万天,如果说人真的有所谓敌人,这些时间大盗才真的是, 相比之下,那些侮辱你嘲笑你看不起你的人还真算不得什么。 --------------------------------------------------------------*/ //--> </script>

END

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!