<!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>
