【Canvas與戳記】藍底黃面十六角Premium Quality戳記

【成圖】

【代碼】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>藍底黃面十六角Premium Quality戳記 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();var gnt=ctx.createRadialGradient(0,0,0,0,0,WIDTH/Math.sqrt(2));gnt.addColorStop(0,"rgb(104,155,193)");gnt.addColorStop(1,"rgb(29,44,73)");ctx.fillStyle = gnt;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 top=createPt2(ct.x,ct.y,r*1.08,-Math.PI/2);var bottom=createPt2(ct.x,ct.y,r*1.08,+Math.PI/2);var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);gnt.addColorStop(0,"rgb(244,231,166)");gnt.addColorStop(1,"rgb(187,148,61)");ctx.fillStyle=gnt;drawSawtoothLoop(ctx,ct.x,ct.y,16,r*1.08,r*0.92);    ctx.fill();ctx.restore();// #2 鋸齒圈ctx.save();    var r=R*0.99;var top=createPt2(ct.x,ct.y,r*1.08,-Math.PI/2);var bottom=createPt2(ct.x,ct.y,r*1.08,+Math.PI/2);var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);gnt.addColorStop(0,"rgb(230,140,47)");gnt.addColorStop(1,"rgb(248,214,77)");ctx.fillStyle=gnt;drawSawtoothLoop(ctx,ct.x,ct.y,16,r*1.08,r*0.92);    ctx.fill();ctx.restore();// #3 圓圈ctx.save();    var r=R*0.84;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(254,244,234)");gnt.addColorStop(1,"rgb(226,144,37)");drawSolidCircle(ctx,ct.x,ct.y,r,gnt);ctx.restore();// #4 圓圈ctx.save();    var r=R*0.83;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(243,228,118)");gnt.addColorStop(1,"rgb(226,144,37)");drawSolidCircle(ctx,ct.x,ct.y,r,gnt);ctx.restore();// #5 黑圈ctx.save();    var r=R*0.78;drawSolidCircle(ctx,ct.x,ct.y,r,"black");ctx.restore();// #6 環文ctx.save();    var r=R*0.70;for(var i=0;i<4;i++){var theta=Math.PI/2*i+Math.PI/4;var p=createPt2(ct.x,ct.y,r,theta);drawSolidCircle(ctx,p.x,p.y,R/220*3,gnt);// 四個圓點}r=R*0.69;for(var i=1;i<6;i++){var theta=Math.PI/2/6*i-Math.PI/4;var p=createPt2(ct.x,ct.y,r,theta);ctx.fillStyle=gnt;draw5Star(ctx,p.x,p.y,r*0.09);// 右側五星ctx.fill();}for(var i=1;i<6;i++){var theta=-Math.PI/2/6*i+Math.PI/4*5;var p=createPt2(ct.x,ct.y,r,theta);ctx.fillStyle=gnt;draw5Star(ctx,p.x,p.y,r*0.09);// 左側五星ctx.fill();}r=R*0.66;loopText(ctx,ct.x,ct.y,r,-Math.PI/2,Math.PI/4-Math.PI/36,"SATISFACTION",r*0.045,r*0.15,gnt,"Stencil Std");r=R*0.615;loopText(ctx,ct.x,ct.y,r,Math.PI/2,Math.PI/4-Math.PI/36*0.15,"GUARANTEED",r*0.045,r*0.15,gnt,"Stencil Std");ctx.restore();// #7 半透明扇形ctx.save();    var r=R*0.76;var top=createPt2(ct.x,ct.y,r,-Math.PI/2);var bottom=createPt2(ct.x,ct.y,0,0);var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);gnt.addColorStop(0,"rgba(190,190,190,0)");gnt.addColorStop(1,"rgba(190,190,190,0.4)");ctx.fillStyle=gnt;drawFan(ctx,ct.x,ct.y,R*0.62,R*0.76,Math.PI,0);ctx.fill();ctx.restore();// #8 圓圈ctx.save();    var r=R*0.60;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(251,248,243)");gnt.addColorStop(0.5,"rgb(243,185,46)");gnt.addColorStop(1,"rgb(223,154,66)");drawSolidCircle(ctx,ct.x,ct.y,r,gnt);ctx.restore();// #9 圓圈ctx.save();    var r=R*0.55;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(220,139,75)");gnt.addColorStop(1,"rgb(244,229,192)");drawSolidCircle(ctx,ct.x,ct.y,r,gnt);ctx.restore();// #10 圓圈ctx.save();    var r=R*0.54;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(255,253,241)");gnt.addColorStop(0.5,"rgb(238,195,49)");gnt.addColorStop(1,"rgb(221,141,47)");drawSolidCircle(ctx,ct.x,ct.y,r,gnt);ctx.restore();// #11 中心文字ctx.save();    var r=R*0.54;writeText(ctx,ct.x,ct.y,"PREMIUM",r*0.36+"px Noto Sans SC Black","black");writeText(ctx,ct.x,ct.y+r*0.4,"QUALITY",r*0.36+"px Calibri Light","black");ctx.restore();writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制圖","8px consolas","lightgrey");// 版權}
}/*----------------------------------------------------------
基本函數:用于繪制扇形
ctx:繪圖上下文
x:扇形圓心心橫坐標
y:扇形圓心縱坐標
rIn:扇形內徑
rOut:扇形外徑
startAngle:起始角度
endAngle:中止角度
----------------------------------------------------------*/
function drawFan(ctx,x,y,rIn,rOut,startAngle,endAngle){var a=createPt(x+rIn*Math.cos(startAngle),y+rIn*Math.sin(startAngle));var b=createPt(x+rOut*Math.cos(startAngle),y+rOut*Math.sin(startAngle));var c=createPt(x+rOut*Math.cos(endAngle),y+rOut*Math.sin(endAngle));var d=createPt(x+rIn*Math.cos(endAngle),y+rIn*Math.sin(endAngle));ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.arc(x,y,rOut,startAngle,endAngle,false);ctx.lineTo(c.x,c.y);ctx.lineTo(d.x,d.y);ctx.arc(x,y,rIn,endAngle,startAngle,true);ctx.closePath();
}/*------------------------------------------------------------------------函數：寫出環形文字ctx：繪圖上下文x:環中心點橫坐標y:環中心點縱坐標r:環半徑centerAngle：文字中心角度
fanAngle：左右輻角
text:文字
radialBias:徑向偏移值，用于調整文字向心距離
textSize：文字大小
textColor：文字顏色
textFont：文字字體
------------------------------------------------------------------------*/
function loopText(ctx,x,y,r,centerAngle,fanAngle,text,radialBias,textSize,textColor,textFont){var arr=text.split("");var n=arr.length;var part=2*fanAngle/n;for(var i=0;i<arr.length;i++){var theta=centerAngle-fanAngle+part/2+i*part;var p=createPt2(x,y,r,theta);ctx.save();ctx.translate(p.x,p.y+radialBias);ctx.rotate(theta+Math.PI/2);writeText(ctx,0,0,arr[i],textSize+"px "+textFont,textColor)ctx.restore();}
}/*----------------------------------------------------------
基本函數:用于繪制鋸齒環
ctx:繪圖上下文
x:圖形中心橫坐標
y:圖形中心縱坐標
n:齒輪齒數
outerRadius:齒輪外徑
innerRadius:齒輪內徑
----------------------------------------------------------*/
function drawSawtoothLoop(ctx,x,y,n,outerRadius,innerRadius){var angle=Math.PI/n;var gearArr=new Array();// 創建點數組for(var i=0;i<n*2;i++){var alpha=Math.PI/n*i;var bata=alpha+angle;var x1,y1,x2,y2;if(i%2==1){x1=innerRadius*Math.cos(alpha);y1=innerRadius*Math.sin(alpha);x2=outerRadius*Math.cos(bata);y2=outerRadius*Math.sin(bata);                }else{                x1=outerRadius*Math.cos(alpha);y1=outerRadius*Math.sin(alpha);x2=innerRadius*Math.cos(bata);y2=innerRadius*Math.sin(bata);}gearArr.push({x:x1,y:y1});gearArr.push({x:x2,y:y2});}ctx.beginPath();// 繪制輪廓for(var i=0;i<gearArr.length;i++){ctx.lineTo(gearArr[i].x,gearArr[i].y);}ctx.closePath();
}/*--------------------------------------------------
函數:繪制標準正五角星輪廓,可描邊，可填充
ctx:繪圖上下文
x:五角星中心橫坐標
y:五角星中心縱坐標
R:五角星中心到頂點的距離
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7)*1.15;// 稍增胖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;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;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();
}/*----------------------------------------------------------
基本函數:用于繪制實心圓
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();
}/*----------------------------------------------------------
基本函數:用于繪制矩形
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();
}/*----------------------------------------------------------
基本函數:創建一個二維坐標點
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>

【Canvas與戳記】藍底黃面十六角Premium Quality戳記

【成圖】

【代碼】

END

相關文章

深度學習：洞察發展趨勢，展望未來藍圖

基于Docker部署的Teable應用

Java項目實現【記錄系統操作日志】功能

響應式編程框架Reactor【4】

第21節：環境貼圖與PBR材質升級——構建電影級真實感渲染

【ROS2】ROS2 基礎學習教程、movelt學習

Java類加載與JVM詳解：從基礎到雙親委托機制

準備機試--圖【y總版】[重要]【最短路】

Python API接口實戰指南：從入門到精通

Spring和mybatis整合后事務攔截器TransactionInterceptor開啟提交事務流程

05.《ARP協議基礎知識探秘》

互聯網大廠面試：大模型應用開發崗位核心技術點解析

【深度學習新浪潮】有沒有什么方法可以將照片變成線描稿，比如日式漫畫的那種？

NV032NV037美光固態閃存NV043NV045

天碩G40工業固態硬盤破解軌道存儲難題

基于Velero + 阿里云 OSS的Kubernetes 集群的備份與恢復

解構與重構：“真人不露相，露相非真人” 的存在論新解 —— 論 “真在” 的行為表達本質

數據結構：哈希表、排序和查找

【Java基礎】Java I/O模型解析：BIO、NIO、AIO的區別與聯系（Netty入門必備基礎）

windows PowerToys之無界鼠標：一套鍵鼠控制多臺設備