【Canvas与图标】乡土风金属铝边立方红黄底黑字图像处理图标

普兰店拉马努金2024-12-06 8:48

【成图】

120*120图标：

大小图：

【代码】

复制代码 
<!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.save();
        ctx.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();

        const R=210;// 基准尺寸
                
        // 第1圈
        ctx.save();    
        ctx.shadowOffsetX=R/105; 
        ctx.shadowOffsetY=R/105; 
        ctx.shadowColor="lightgrey";
        ctx.shadowBlur=R/105*2;
        var r=R*1.00;
        ctx.fillStyle="grey";
        drawRhombusSqare(ctx,0,0,r,R/6);
        ctx.fill();
        ctx.restore();    
        
        // 第2圈
        ctx.save();    
        var r=R*0.99;
        var gnt2=ctx.createLinearGradient(0,-r,0,r);
        gnt2.addColorStop(0,"rgb(111,111,111)");
        gnt2.addColorStop(0.25,"rgb(251,251,251)");
        gnt2.addColorStop(0.5,"rgb(179,179,179)");
        gnt2.addColorStop(0.75,"rgb(251,251,251)");
        gnt2.addColorStop(1.0,"rgb(111,111,111)");
        ctx.fillStyle=gnt2;
        drawRhombusSqare(ctx,0,0,r,R/6-0.01*R);
        ctx.fill();
        ctx.restore();

        // 第3圈
        ctx.save();    
        var r=R*0.91;
        var gnt2=ctx.createLinearGradient(0,-r,0,r);
        gnt2.addColorStop(0,"rgb(107,107,107)");
        gnt2.addColorStop(0.25,"rgb(143,143,143)");
        gnt2.addColorStop(0.5,"rgb(95,95,95)");
        gnt2.addColorStop(0.75,"rgb(143,143,143)");
        gnt2.addColorStop(1.0,"rgb(107,107,107)");
        ctx.fillStyle=gnt2;
        drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.04*R);
        ctx.fill();
        ctx.restore();

        // 第4圈
        ctx.save();    
        var r=R*0.87;
        ctx.fillStyle="rgb(210,33,30)";
        drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.06*R);
        ctx.fill();
        ctx.restore();

        // 黄带
        ctx.save();    
        var r=R*0.87;
        drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.06*R);
        ctx.clip();
        ctx.fillStyle="rgb(247,187,15)";
        drawRect(ctx,0,0,2*r,r);
        ctx.fill();
        ctx.restore();

        // 白线
        ctx.save();    
        var r=R*0.87;
        drawRhombusSqare(ctx,0,0,r,R/6-0.01*R-0.06*R);
        ctx.clip();

        ctx.lineWidth=R/105;
        ctx.strokeStyle="white";
        var N=12;
        var PART=r/N;
        for(var i=0;i<N+1;i++){
            ctx.beginPath();
            ctx.moveTo(-r,-r/2+i*PART);
            ctx.lineTo(+r,-r/2+i*PART);
            ctx.stroke();
        }
        ctx.restore();

        // 文字
        ctx.save();    
        var r=R*0.87;
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.font = r*0.4+"px 方正宋刻本秀楷简体";
        ctx.fillStyle="black";
        ctx.fillText("图像处理",0,r*0);
        ctx.restore();
        

        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于绘制旋转45°的正方形
ctx:绘图上下文
x:正方形中心横坐标
y:正方形中心纵坐标
radius:正方形中心到顶点的距离
roundRadius:圆角半径
----------------------------------------------------------*/
function drawRhombusSqare(ctx,x,y,radius,roundRadius){
    const r=radius;// 中心到顶点的距离
    const round=roundRadius;// 圆角半径

    var center=createPt(x,y);
    var a=createPt(center.x+r*Math.cos(Math.PI/2*0),center.y+r*Math.sin(Math.PI/2*0));

    var angle=Math.PI/4*5;
    var l=round;
    var a1=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));

    angle=Math.PI/4*3;
    l=round;
    var a2=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));

    angle=Math.PI;
    l=round*Math.sqrt(2);
    var a0=createPt(a.x+l*Math.cos(angle),a.y+l*Math.sin(angle));

    var b=createPt(center.x+r*Math.cos(Math.PI/2*1),center.y+r*Math.sin(Math.PI/2*1));

    angle=-Math.PI/4;
    l=round;
    var b1=createPt(b.x+l*Math.cos(angle),b.y+l*Math.sin(angle));

    angle=Math.PI/4*5;
    l=round;
    var b2=createPt(b.x+l*Math.cos(angle),b.y+l*Math.sin(angle));

    angle=-Math.PI/2;
    l=round*Math.sqrt(2);
    var b0=createPt(b.x+l*Math.cos(angle),b.y+l*Math.sin(angle));
    
    var c=createPt(center.x+r*Math.cos(Math.PI/2*2),center.y+r*Math.sin(Math.PI/2*2));

    angle=Math.PI/4*1;
    l=round;
    var c1=createPt(c.x+l*Math.cos(angle),c.y+l*Math.sin(angle));

    angle=-Math.PI/4*1;
    l=round;
    var c2=createPt(c.x+l*Math.cos(angle),c.y+l*Math.sin(angle));

    angle=0;
    l=round*Math.sqrt(2);
    var c0=createPt(c.x+l*Math.cos(angle),c.y+l*Math.sin(angle));

    var d=createPt(center.x+r*Math.cos(Math.PI/2*3),center.y+r*Math.sin(Math.PI/2*3));

    angle=Math.PI/4*3;
    l=round;
    var d1=createPt(d.x+l*Math.cos(angle),d.y+l*Math.sin(angle));

    angle=Math.PI/4*1;
    l=round;
    var d2=createPt(d.x+l*Math.cos(angle),d.y+l*Math.sin(angle));

    angle=Math.PI/2;
    l=round*Math.sqrt(2);
    var d0=createPt(d.x+l*Math.cos(angle),d.y+l*Math.sin(angle));
    
    ctx.beginPath();
    ctx.moveTo(a1.x,a1.y);
    ctx.arc(a0.x,a0.y,round,-Math.PI/4,Math.PI/4,false);
    ctx.lineTo(a2.x,a2.y);
    ctx.lineTo(b1.x,b1.y);
    ctx.arc(b0.x,b0.y,round,Math.PI/4,Math.PI/4*3,false);
    ctx.lineTo(b2.x,b2.y);
    ctx.lineTo(c1.x,c1.y);
    ctx.arc(c0.x,c0.y,round,Math.PI/4*3,Math.PI/4*5,false);
    ctx.lineTo(c2.x,c2.y);
    ctx.lineTo(d1.x,d1.y);
    ctx.arc(d0.x,d0.y,round,Math.PI/4*5,-Math.PI/4*1,false);
    ctx.lineTo(d2.x,d2.y);
    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:圆半径
color:填充圆的颜色
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,color){
    ctx.fillStyle=color;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
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

相关推荐
wayhome在哪4 小时前
用 fabric.js 搞定电子签名拖拽合成图片
javascript·产品·canvas
德育处主任5 小时前
p5.js 掌握圆锥体 cone
前端·数据可视化·canvas
德育处主任1 天前
p5.js 3D 形状 "预制工厂"——buildGeometry ()
前端·javascript·canvas
德育处主任3 天前
p5.js 3D盒子的基础用法
前端·数据可视化·canvas
掘金安东尼3 天前
2分钟创建一个“不依赖任何外部库”的粒子动画背景
前端·面试·canvas
百万蹄蹄向前冲4 天前
让AI写2D格斗游戏，坏了我成测试了
前端·canvas·trae
用户2519162427116 天前
Canvas之画图板
前端·javascript·canvas
FogLetter9 天前
玩转Canvas：从静态图像到动态动画的奇妙之旅
前端·canvas
用户25191624271110 天前
Canvas之贪吃蛇
前端·javascript·canvas
用户25191624271110 天前
Canvas之粒子烟花
前端·javascript·canvas
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04KGG转MP3工具|非KGM文件|解密音频052025最新国内服务器可用docker源仓库地址大全（2025年8月更新）06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流