【Canvas与logo】红圈黑底安布雷拉伞矩形胸牌
【成图】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>红圈黑底安布雷拉伞矩形胸牌 Draft2</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;//基准尺寸 var ct=createPt(0,0);// ct=center // #1 灰边 ctx.save(); var r=R*1.00; var w=2*r; var h=w*0.25; ctx.fillStyle="rgb(104,0,0)"; drawRoundRect(ctx,ct.x,ct.y,w,h,h/10); ctx.fill(); ctx.restore(); // #2 外圈 ctx.save(); w-=r*0.02; h-=r*0.02; var top=createPt2(ct.x,ct.y,h/2,-Math.PI/2); var bottom=createPt2(ct.x,ct.y,h/2,Math.PI/2); var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y); gnt.addColorStop(0,"rgb(213,0,0)"); gnt.addColorStop(1,"rgb(176,0,2)"); ctx.fillStyle=gnt; drawRoundRect(ctx,ct.x,ct.y,w,h,h/10-r*0.01); ctx.fill(); ctx.restore(); // #3 黑底 ctx.save(); w-=r*0.02; h-=r*0.02; var top=createPt2(ct.x,ct.y,h/2,-Math.PI/2); var bottom=createPt2(ct.x,ct.y,h/2,Math.PI/2); var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y); gnt.addColorStop(0,"rgb(250,250,250)"); gnt.addColorStop(1,"rgb(230,222,217)"); ctx.fillStyle="black"; drawRoundRect(ctx,ct.x,ct.y,w,h,h/10-r*0.02); ctx.fill(); ctx.restore(); // #4 伞logo ctx.save(); var center=createPt2(ct.x,ct.y,w/2*0.8,0); var r=h*0.4; drawUmbrellaIcon(ctx,center.x,center.y,r); ctx.restore(); // #5 文字 ctx.save(); var r=R*1.00; ctx.scale(1.3,1); writeText(ctx,ct.x-r*0.14,ct.y+r*0.05,"UMBRELLA",r*0.22+"px Noto Sans SC Medium",gnt); writeText(ctx,ct.x+r*0.01,ct.y+r*0.18,"CORPORATION",r*0.13+"px Noto Sans SC Light",gnt); ctx.restore(); // #6 玻璃光 ctx.save(); w-=r*0.02; h-=r*0.02; drawRoundRect(ctx,ct.x,ct.y,w,h,h*0.04); ctx.clip(); var top=createPt2(ct.x,ct.y,h/2,-Math.PI/2); var bottom=createPt2(ct.x,ct.y,h/2,Math.PI/2); var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y); gnt.addColorStop(0,"rgba(255,255,255,0.5)"); gnt.addColorStop(0.1,"rgba(255,255,255,0.4)"); gnt.addColorStop(0.2,"rgba(255,255,255,0.3)"); gnt.addColorStop(0.3,"rgba(255,255,255,0.2)"); gnt.addColorStop(0.4,"rgba(255,255,255,0.1)"); gnt.addColorStop(1,"rgba(255,255,255,0.0)"); ctx.fillStyle=gnt; drawRect(ctx,ct.x,ct.y,w,h); ctx.fill(); ctx.restore(); writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权 } } /*---------------------------------------------------------- 函数:用于绘制安布雷拉完整图标，依赖drawAmbrella函数 ctx:绘图上下文 x:轮廓中心横坐标 y:轮廓中心纵坐标 R:伞中心到尖端半径 ----------------------------------------------------------*/ function drawUmbrellaIcon(ctx,x,y,R){ const ct=createPt(x,y);// ct=CENTER const initAngle=Math.PI/8; //#1 背景 ctx.save(); var r=R*1.00; var top=createPt2(ct.x,ct.y,r,-Math.PI/2); var bottom=createPt2(ct.x,ct.y,r,Math.PI/2); var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y); gnt.addColorStop(0,"rgb(104,104,104)"); gnt.addColorStop(1,"rgb(2,2,2)"); ctx.fillStyle=gnt;// 边框 drawAmbrella(ctx,ct.x,ct.y,r,initAngle,r/10); ctx.fill(); ctx.restore(); //#2 外八瓣 ctx.save(); var r=R*0.94; var rin=r/20; var rout=r*0.95; for(var i=0;i<8;i++){ var theta=i*Math.PI/4; var a=createPt2(ct.x,ct.y,rin,theta); var b=createPt2(a.x,a.y,rout,theta+Math.PI/8); var c=createPt2(a.x,a.y,rout,theta-Math.PI/8); var d=createPt2(a.x,a.y,rout*2*Math.cos(Math.PI/8),theta); ctx.fillStyle=(i%2==0)?"rgb(141,5,0)":"rgb(202,202,202)"; ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.arc(d.x,d.y,rout,theta+Math.PI-Math.PI/8,theta+Math.PI+Math.PI/8,false); ctx.closePath(); ctx.fill(); } ctx.restore(); //#3 内八瓣 ctx.save(); var r=R*0.90; var rin=r/8; var rout=r*0.86; for(var i=0;i<8;i++){ var theta=i*Math.PI/4; var a=createPt2(ct.x,ct.y,rin,theta); var b=createPt2(a.x,a.y,rout,theta+Math.PI/8); var c=createPt2(a.x,a.y,rout,theta-Math.PI/8); var d=createPt2(a.x,a.y,rout*0.8,theta); ctx.fillStyle=(i%2==0)?"rgb(196,5,0)":"rgb(242,242,242)"; ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.quadraticCurveTo(d.x,d.y,c.x,c.y); ctx.closePath(); ctx.fill(); } ctx.restore(); //#4 玻璃光 ctx.save(); var r=R*0.91; drawAmbrella(ctx,ct.x,ct.y,r,initAngle,r/10); ctx.clip(); var r=R*1.00; var top=createPt2(ct.x,ct.y,r,-Math.PI/2); var left=createPt2(ct.x,ct.y,r,Math.PI); var right=createPt2(ct.x,ct.y,r,0); var bottom=createPt2(ct.x,ct.y,r*0.7,Math.PI/2); var gnt=ctx.createLinearGradient(0,top.y,0,bottom.y); gnt.addColorStop(0,"rgba(255,255,255,0.0)"); gnt.addColorStop(0.6,"rgba(255,255,255,0.15)"); gnt.addColorStop(0.8,"rgba(255,255,255,0.5)"); gnt.addColorStop(0.9,"rgba(255,255,255,0.7)"); gnt.addColorStop(1,"rgba(255,255,255,0.9)"); ctx.fillStyle=gnt; ctx.beginPath(); ctx.moveTo(left.x,top.y); ctx.lineTo(right.x,top.y); ctx.lineTo(right.x,right.y); ctx.quadraticCurveTo(bottom.x,bottom.y,left.x,left.y); ctx.closePath(); ctx.fill(); ctx.restore(); //#5 消除间隔玻璃光的小棍 ctx.save(); var r=R*0.94; var top=createPt2(ct.x,ct.y,r,-Math.PI/2); var bottom=createPt2(ct.x,ct.y,r,Math.PI/2); var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y); gnt.addColorStop(0,"rgb(104,104,104)"); gnt.addColorStop(1,"rgb(2,2,2)"); for(var i=0;i<4;i++){// 分瓣线 var theta=Math.PI/4*i+Math.PI/8; var a=createPt2(ct.x,ct.y,r,theta); var b=createPt2(ct.x,ct.y,r,theta+Math.PI); ctx.lineWidth=r*0.03; ctx.strokeStyle=gnt; ctx.beginPath(); ctx.lineTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke(); } ctx.restore(); } /*---------------------------------------------------------- 函数:用于绘制安布雷拉伞外轮廓 ctx:绘图上下文 x:轮廓中心横坐标 y:轮廓中心纵坐标 R:伞中心到尖端半径 initAngle:初始角度 round:圆角半径 ----------------------------------------------------------*/ function drawAmbrella(ctx,x,y,R,initAngle,round){ var ct=createPt(x,y);// ct=center var arr=[];// 放端点的数组 for(var i=0;i<8;i++){ var theta=Math.PI/4*i+initAngle; var a=createPt2(ct.x,ct.y,R,theta);// 当前角 var b=createPt2(ct.x,ct.y,R,theta+Math.PI/4);// 下一角 var c=createPt(0,0);// 以ab为对称轴，ct的镜像点，即圆弧的圆心 c.x=a.x+b.x-ct.x; c.y=a.y+b.y-ct.y; var startAngle=theta-Math.PI/4*3;// 起始角 var endAngle=theta-Math.PI;// 结束角 var unit={"o":c,r:R,"startAngle":startAngle,"endAngle":endAngle,}; arr.push(unit); } var biasAngle=round/R;// 圆角半径占据的偏移角 ctx.beginPath(); for(var i=0;i<arr.length;i++){ var unit=arr[i]; ctx.arc(unit.o.x,unit.o.y,unit.r,unit.startAngle-biasAngle,unit.endAngle+biasAngle,true);// 画圆弧 var a=createPt2(unit.o.x,unit.o.y,unit.r,unit.endAngle+biasAngle);// 贝塞尔曲线起点 var b=createPt2(unit.o.x,unit.o.y,unit.r,unit.endAngle);// 贝塞尔曲线终点 var nextUnitIdx=(i+1)%(arr.length); var nextUnit=arr[nextUnitIdx];// 得到下一个顶点 var c=createPt2(nextUnit.o.x,nextUnit.o.y,nextUnit.r,nextUnit.startAngle-biasAngle);// 贝塞尔曲线控制点 ctx.quadraticCurveTo(b.x,b.y,c.x,c.y);// 用贝塞尔曲线光滑连接圆弧 } ctx.closePath(); } /*---------------------------------------------------------- 函数:用于绘制圆角矩形 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(); } /*---------------------------------------------------------- 函数:创建一个二维坐标点 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(); } /*------------------------------------------------------------- 难懂之处，只能想通，不能讲通。 人生八句宽心话 第一句: 来时，干干净净，去时，两手空空。既然生死之时，都没有附属物。又何必把钱财物质看重？轻松生活，快乐度日，才是此生最好的收获。 第二句： 对的人，永远都在你身边。无论时光怎么变迁，无论你遭遇了何事，轻易离开我们的，其实都是错的人，不是三观不合，就是道路不同，不用过于放在心里，对的人，其实一直都在！ 第三句： 开心，是最好的活法！人这一生，其实贵在开心，很多东西，生不带来死不带去，唯有我们开心的活着，珍惜身边的人，过好每一天，才算是不负人生，不负自己！ 第四句： 逆境，只有一种作用，那就是淬炼你！ 千锤百炼，不断打磨，才能遇见更好的你。所以，当我们面对逆境，不要抱怨，从容前行，放平心态，相信一切都会熬过去！第五句： 人生最大的愚蠢，就是无视自己的身体，用健康换取身外之物。身体垮了，健康没了，再用钱财治病。得不偿失，何必如此。不如好好爱惜自己的身体，有点小钱，衣食无忧就行。 第六句： 欲望可以有，但你不能贪。有欲望其实很正常，人或多或少，都有点自己想要的东西。但我们要让欲望合理化，不高过度，超过自己的能力太多，否则，只会累坏了自己！ 第七句： 两年学说话，一生学闭嘴，智者语迟，愚者话多，人贵在知而不言，懂得沉默。看透不说透，看穿别揭穿，管住嘴巴，避免话多惹祸。 第八句： 过去的事，封存不提；现在的事，用力做好；以后的事，顺其自然。别和天争，争不过天，别和人斗，斗出冲突。学会看淡看轻看开，顺其自然，一切随缘，属于你的，一定会来！ --------------------------------------------------------------*/ //--> </script>
END
浙公网安备 33010602011771号