【Canvas与图标】紫色Java图标
【成图】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>紫色Java图标 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 = "rgb(1,84,152)"; //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 gnt=ctx.createRadialGradient(0,0,0,0,0,r); gnt.addColorStop(0,"rgb(210,210,210)"); gnt.addColorStop(0.9,"rgb(210,210,210)"); gnt.addColorStop(1,"white"); drawSolidCircle(ctx,ct.x,ct.y,r,gnt); ctx.restore(); // #2 凸圈 ctx.save(); var r=R*0.95; 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,"white"); gnt.addColorStop(1,"rgb(205,205,205)"); drawSolidCircle(ctx,ct.x,ct.y,r,gnt); ctx.restore(); // #3 平圈 ctx.save(); var r=R*0.91; drawSolidCircle(ctx,ct.x,ct.y,r,"rgb(242,242,242)"); ctx.restore(); // #4 凹圈 ctx.save(); var r=R*0.85; 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(205,205,205)"); gnt.addColorStop(1,"rgb(254,254,254)"); drawSolidCircle(ctx,ct.x,ct.y,r,gnt); ctx.restore(); // #4 ctx.save(); var r=R*0.81; var gnt=ctx.createRadialGradient(ct.x,ct.y,0,ct.x,ct.y,r); gnt.addColorStop(0,"rgb(110,36,183)"); gnt.addColorStop(1,"rgb(76,3,136)"); drawSolidCircle(ctx,ct.x,ct.y,r,gnt); ctx.restore(); // #5 ctx.save(); var r=R*0.81; var gnt4=ctx.createLinearGradient(ct.x,ct.y-r,ct.x,ct.y); gnt4.addColorStop(0,"rgba(255,255,255,0.3)"); gnt4.addColorStop(0.5,"rgba(255,255,255,0.2)"); gnt4.addColorStop(1,"rgba(255,255,255,0.0)"); ctx.fillStyle=gnt4; drawTuoYuan(ctx,ct.x,ct.y-r*0.5,r*1.2,r*0.9); ctx.fill(); ctx.restore(); // #5 文字 ctx.save(); var r=R*1.00; writeText(ctx,ct.x,ct.y+r*0.3,"Java",r*0.63+"px Noto Sans SC Medium","white"); 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:五角星中心到顶点的距离 initAngle:初始角度 ---------------------------------------------------*/ function draw5Star(ctx,x,y,R,initAngle){ 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+initAngle; 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+initAngle; 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(); } /*---------------------------------------------------------- 基础函数:用于从角度取得弧度，便于微调 degree:角度值，如30，60，90 返回值:弧度值，如PI/6,PI/3,PI/2 ----------------------------------------------------------*/ function getRadian(degree){ return degree/180*Math.PI; } /*---------------------------------------------------------- 基础函数:用于取得两点间距离 p1:起点 p1:终点 ----------------------------------------------------------*/ function getDistance(p1,p2){ return Math.sqrt((p1.x-p2.x)*(p1.x-p2.x)+(p1.y-p2.y)*(p1.y-p2.y)); } /*---------------------------------------------------------- 基础函数:用于绘制矩形 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(); } /*---------------------------------------------------------- 基础函数:创建一个二维坐标点 base:基准点,入参必需有x和y两参数 radius:当前点到基准点的距离 theta:当前点到基准点的角度 Pt即Point ----------------------------------------------------------*/ function createPt3(base,radius,theta){ var retval={}; retval.x=base.x+radius*Math.cos(theta); retval.y=base.y+radius*Math.sin(theta); return retval; } /*---------------------------------------------------------- 基础函数:创建一个二维坐标点 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(); } /*------------------------------------------------------------- 《很多挣大钱的方法，都不敢写出来》 挣大钱的奥秘，一半潜藏在危险的边缘，一半深埋于人性的幽径。 我们都清楚，依靠不正当手段获取的财富，就如同空中楼阁，看似华丽却摇摇欲坠，无法长久拥有和享用。 正如林肯所说：“你可以在所有的时间欺骗一部分人，也可以在一段时间欺骗所有的人，但你不可能在所有的时间欺骗所有的人。” 所以，摒弃那些危险的念头，用心去探究人性，从人性中挖掘财富，才是高明的智慧。 那么，何为真正的人性呢？ 它是我们与生俱来的本能反应，是未经思考的原始冲动。 人性所引发的需求，往往急切地渴望被即刻满足，一旦未能如愿，人便会坐立不安，内心焦躁。 倘若你还在困惑如何赚钱，那只能说明你对人性缺乏认知，对特定人群的需求更是一无所知。 不了解他人的喜好与需求，自然会感到茫然无措。 那些真正洞察人性的人，始终密切关注现实世界，敏锐地洞察舆论风向、把握大众的社会心态，从这些细微之处总结出商业诀窍，这是他们的过人之处。 而所谓的发财之道，也不过是建立在这些真实市场反馈基础上的系统方法罢了。 如果你依旧心存疑问，那我只能从人性的层面为你深入剖析：先深刻认识自己的人性，再反思自己的行为举止，让自己与普通人背道而驰，那时你就会明白财富是如何自然而然地向你涌来。 当你能够超越常人的思维模式，满足那些未被充分满足的人性需求，财富便会如同被磁石吸引的铁屑一般，源源不断地流向你。 正如巴菲特所言：“别人贪婪时我恐惧，别人恐惧时我贪婪。” 01 做一个 “反本能” 的人 比如克服拖延习惯、勇于突破舒适区、坚持终身学习。 如果我们顺从本能，就会像温水中的青蛙，逐渐失去前进的动力和勇气。 但我们是拥有无限潜力的人类，意志可以让我们战胜懒惰和安逸，让我们拥有超越本能的自我驱动力。 这些力量能让我们不断提升自己的能力、拓展自己的视野。 正如乔布斯所说：“你的时间有限，所以不要为别人而活。不要被教条所限，不要活在别人的观念里。不要让别人的意见左右自己内心的声音。最重要的是，勇敢地去追随自己的心灵和直觉。” 一些杰出的人物早已发现这个秘密，并通过挑战自我变得卓越，在人生的舞台上绽放光彩。 而反观许多碌碌无为的人，他们虽然同样拥有潜力，却从未想过挖掘自己，而是任由自己的本能主宰，比如沉溺于安逸、恐惧改变、抱怨命运等情绪，让自己陷入平庸。 这种平庸不仅体现在成就上的匮乏，更是一种内心的贫瘠，看似是由于缺乏机遇才导致人生平淡无奇，但实际上缺乏的是对自我的挑战能力，是对潜力的挖掘能力。 正是这些能力的缺失，使得他们失去了对人生的掌控。 因此，在追求成功之前，先问问自己，是否准备好做一个勇于挑战自我的人？是否愿意付出努力去磨砺自己的意志？ 02 学会让他人获得更多价值 别误解，不是让你做无私奉献的圣人，而是在保证自身发展的前提下，最大限度地为身边的人、客户群体和合作伙伴创造价值。 能做到这一点，还需要四处寻找成功的捷径吗？ 完全不需要了。少即是多，把 “为他人创造价值” 这个成功法则真正领悟透彻，一生都将受益无穷。 当然，需要强调的是，让他人受益并不意味着放弃自己的原则和底线，相反，我们要敢于说 “不”，要有坚定的立场，只有这样，这种模式才能持续下去。 比如，你经营一家软件开发公司，技术精湛、服务周到、响应及时，同时价格合理，那么你就是在正确地 “让客户获得更多价值”。 那些因业务不佳而愁眉苦脸的老板，他们不明白这个道理，反而抱怨市场竞争激烈、人才难留。他们对客户缺乏热情，产品质量不稳定，还沉浸在 “利润微薄” 的狭隘心态中。 这样做生意，只会关注自身的利益得失，完全不顾客户的需求和感受，这样的 “交易” 怎么可能赢得客户的信任和忠诚，更别提长期合作了。 分享一个看似玄妙的心法：当你只关注自己的利益时，你往往很难获得成功，因为你的格局太小了。 但当你专注于为他人创造价值时，你会更容易获得他人的认可和支持。 不积跬步，无以至千里；急于求成，往往一事无成。 03 其实你本就无比珍贵 你至少拥有两大强大的武器：一、专注力；二、创造力。 首先是专注力，这里我不用 “时间” 来表述，因为时间是一个相对抽象的概念。 有些人即使拥有一整天的时间，也可能无法专注一小时去做有意义的事情。 无法专注的时间，确实如垃圾时间一般毫无价值。在我看来，“专注力” 远胜于 “时间”。 请记住，你的专注力是最为宝贵的财富。 无论你想学习一门新技能，还是完成一项重要任务，拥有高度的专注力是成功的关键。 大多数人并不珍惜自己的专注力，他们即使下班回家，也很少花时间去学习提升、探索新的机会。 他们的生活被娱乐节目、社交软件等占据，这些东西正在侵蚀他们的专注力，让他们逐渐变得平庸。 比如，著名科学家牛顿，他在研究问题时极度专注，常常忘记吃饭和睡觉，正是这种专注力让他在物理学等领域取得了卓越的成就。 再说第二点，创造力。在这个充满变革的时代，每个人都有能力通过创新来展现自己的影响力。 一个人要想在事业上取得成功，离不开创新和独特的价值主张。 过去，传统的商业模式可能占据主导，但如今，创新和个性化的产品与服务越来越受到欢迎。 如果你不发挥自己的创造力，不去尝试新的方法和思路，就很容易被市场淘汰。 就像特斯拉的创始人埃隆・马斯克，他不断挑战传统，以创新的思维和技术推动了电动汽车和太空探索等领域的发展。 04 因此，问题不是 “做不做”，而是立即行动，全力以赴地去做，并且要做到极致。 一个成熟的人，应该对世界充满好奇，积极学习新事物，追求自由和进步。 追求成功的过程，也是一个塑造自我、实现人生价值的过程。 我们来到这个世界时一无所有，如果能通过自己的努力给这个世界带来一些积极的改变，那将是多么有意义的事情。 很多时候，我们看似在追求财富，其实是在探索人生的意义。 条条大路通罗马。 人生的道路有千万条，但要想走出属于自己的精彩人生，还需要回归内心，问问自己真正想要的是什么。 THE END 1、不较劲。生活就像一根橡皮筋，你越是用力拉扯，它反弹时的力量就越大。有人总跟自己较劲，一件小事没做好就反复苛责自己；有人总跟他人较劲，一点小事也要争个对错输赢。可较劲到最后，往往是自己身心俱疲。允许别人做别人，允许自己做自己。有时候，不较劲，反而能在从容中找到前行的节奏。 2、不攀比。生活中的许多烦恼，都源于盲目和别人攀比。要知道，每个人都有自己的人生轨迹，就像花儿一样，牡丹有牡丹的娇艳，梅花有梅花的傲骨，不必羡慕别人。幸福不是比出来的，而是自己过出来的。专注于自己的生活，今天比昨天进步一点，明天比今天从容一点，就是最好的生活状态。 3、不纠结。一杯水有多重？你拿1分钟，可能觉得无足轻重。你拿1小时，可能会觉得手酸。可拿一天呢？一个星期呢？别人的一个眼神，你反复纠结；他人的一句无心之言，你过度在意；每件事都要求自己做到完美，一点错都不能犯……一点压力是动力，但一摞摞的压力，却足以把你压倒。当你不纠结、丢掉心里的包袱，生活也会变得从容。 4、不冲动。生活中，我们难免会遇到让自己生气的事情。这时候最重要的，是能够稳定情绪。失控的情绪不仅会伤害自己，也有可能伤害身边人。问题产生情绪，情绪却解决不了问题。急事要缓，事缓则圆。遇事先稳住自己，不急不躁，自然能找到解决之道。 5、不计较。与人交往，难免有矛盾和摩擦。事事计较，既是为难他人，也是让自己为难。所谓心宽一寸，则路宽一丈。把心放宽一点，对小事少一点计较，对他人多一点包容，烦恼自然会减少，生活也会多一份轻松。 6、不焦虑。很多时候，越焦虑，越浮躁；越浮躁，越做不好事情。要知道，对尚未发生的事过度揣测，只会先被头脑里的困难吓倒。事实上，你内心所焦虑的，可能99%都不会发生。把注意力放在当下，做好眼前的每一件事，踏实走好当下每一步，那些你预设的难题，或许会成为另一种惊喜。 7、不自卑。金无足赤，人无完人。每个人都有自己的缺点和不足。无论你喜欢与否，这都是真实的你，独一无二的你。一个人只有悦纳自己，才会拥有快乐的人生。想要变更好看，就去健身，塑造更优美的线条；渴望闪闪发光的自己，就去学习，用知识充实自己的大脑。 8、不逃避。你可以暂时逃避现实，但你无法逃避“选择逃避现实”后造成的不良后果。因为，逃避并不能让问题消失，反而会让问题越积越多，最后变得更加难以解决。遇到麻烦，就冷静地分析原因，找到解决的办法。摆脱恐惧最好的办法就是直面恐惧。 9、不偏执。一个认为只有自己正确的人，永远不会快乐。因为他的世界，只有自己。偏执往往会让人陷入僵局：固执、暴躁、易怒，直至将自己推向孤立无援的境地。学会灵活变通，是一种智慧。认定目标没错，但如果发现方向不对，就及时调整。就像水流一样，遇到无法逾越的阻碍，会巧妙地绕道而行，最终才能到达大海。不偏执于一条路，不固执于一种想法，才能在变化的世界中，找到属于自己的出路。。 --------------------------------------------------------------*/ //--> </script>
END
浙公网安备 33010602011771号