【Canvas与图标】牛皮纸文件袋图标

普兰店拉马努金2024-10-30 12:24

【成图】

120*120的png图标：
以下是大小图：

【代码】

复制代码 
<!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=90;// 基准尺寸

        // 大袋
        ctx.save();        
        ctx.shadowOffsetY=2; // 设置阴影
        ctx.shadowOffsetX=0;
        ctx.shadowColor="grey";
        ctx.shadowBlur=2;
        var r=R*1.00;
        var w=2*r;
        var h=2*r;
        ctx.lineWidth=r/40;
        ctx.strokeStyle="black";
        ctx.fillStyle="rgb(251,177,80)";
        drawChamferedRect(ctx,0,0,w,h,r/12);
        ctx.fill();
        ctx.stroke();
        ctx.restore();

        // 盖板
        ctx.save();        
        ctx.shadowOffsetY=4; // 设置阴影
        ctx.shadowOffsetX=0;
        ctx.shadowColor="rgb(198,119,40)";
        ctx.shadowBlur=4;
        var r=R*1.00;
        var w=2*r;
        var h=2*r/3;
        ctx.lineWidth=r/50;
        ctx.strokeStyle="black";
        ctx.fillStyle="rgb(255,190,108)";
        drawChamferedRect(ctx,0,-r*2/3,w,h,r/12);
        ctx.fill();
        ctx.stroke();
        ctx.restore();

        // 左右黑线
        ctx.save();        
        var r=R*1.00;        
        var w=r/30;
        var h=r*2/3;
        ctx.fillStyle="black";// 左
        drawRect(ctx,-r/14-w/2,-h/2,w,h);
        ctx.fill();
        ctx.fillStyle="black";// 右
        drawRect(ctx,r/14+w/2,-h/2,w,h);
        ctx.fill();
        ctx.restore();

        // 下端黑线
        ctx.save();        
        var r=R*1.00;        
        var w=r/30;
        var h=r*1/3;
        ctx.translate(r/14+w/2,0);
        ctx.rotate(Math.PI/18);
        ctx.fillStyle="black";// 右
        drawRoundRect(ctx,0,h/2,w,h,r/70);
        ctx.fill();
        ctx.restore();

        // 上圆
        ctx.save();        
        var r=R*1.00;
        var r1=r/7;    // 大圆
        ctx.lineWidth=r/50;
        ctx.strokeStyle="black";
        ctx.fillStyle="rgb(251,233,211)";
        ctx.beginPath();
        ctx.arc(0,-r*2/3,r1,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        var r2=r/14;    // 小圆
        ctx.lineWidth=r/50;
        ctx.strokeStyle="black";
        ctx.fillStyle="rgb(251,177,80)";
        ctx.beginPath();
        ctx.arc(0,-r*2/3,r2,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();

        // 下圆
        ctx.save();        
        var r=R*1.00;
        var r1=r/7;    // 大圆
        ctx.lineWidth=r/50;
        ctx.strokeStyle="black";
        ctx.fillStyle="rgb(251,233,211)";
        ctx.beginPath();
        ctx.arc(0,0,r1,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        var r2=r/14;    // 小圆
        ctx.lineWidth=r/50;
        ctx.strokeStyle="black";
        ctx.fillStyle="rgb(251,177,80)";
        ctx.beginPath();
        ctx.arc(0,0,r2,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();        

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

/*----------------------------------------------------------
函数:用于绘制倒角矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
chamferLength:倒角长度
----------------------------------------------------------*/
function drawChamferedRect(ctx,x,y,width,height,chamferLength){
    ctx.beginPath();
    ctx.moveTo(x-width/2+chamferLength,y-height/2);
    ctx.lineTo(x+width/2-chamferLength,y-height/2);
    ctx.lineTo(x+width/2,y-height/2+chamferLength);
    ctx.lineTo(x+width/2,y+height/2-chamferLength);
    ctx.lineTo(x+width/2-chamferLength,y+height/2);
    ctx.lineTo(x-width/2+chamferLength,y+height/2);
    ctx.lineTo(x-width/2,y+height/2-chamferLength);
    ctx.lineTo(x-width/2,y-height/2+chamferLength);
    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:圆半径
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

相关推荐
李李记2 天前
别让 “断字” 毁了 Canvas 界面！splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
鱼钓猫10 天前
H5 电子签名组件
vue.js·canvas
小鱼儿亮亮12 天前
canvas中常见问题的解决方法及分析，踩坑填坑经历
前端·canvas
普兰店拉马努金12 天前
【Canvas与图标】古铜色“HTML”图标
html·canvas·图标
特立独行的猫a12 天前
HarmonyOS 鸿蒙系统自带的 SymbolGlyph 图标组件详解
华为·harmonyos·图标·symbolglyph
wayhome在哪22 天前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
PineappleCoder1 个月前
SVG 适合静态图，Canvas 适合大数据？图表库的场景选择
前端·面试·canvas
德育处主任1 个月前
p5.js 用 cylinder() 绘制 3D 圆柱体
前端·数据可视化·canvas
蛋蛋_dandan1 个月前
Fabric.js从0到1实现图片框选功能
canvas
wayhome在哪1 个月前
用 fabric.js 搞定电子签名拖拽合成图片
javascript·产品·canvas
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南0346个Nano-banana 精选提示词，持续更新中04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10KGG转MP3工具|非KGM文件|解密音频