【Canvas与徽章】英联邦十五国黄金徽章

原创 于 2025-10-08 13:37:29 发布 · 686 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#canvas #徽章 #英联邦

【成图】

1

2

3

4

5

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>英联邦十五国黄金徽章 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(116,116,116)";
        //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;
        drawSolidCircle(ctx,ct.x,ct.y,r,"grey");
        ctx.restore();

        // #2
        ctx.save();    
        var r=R*0.995;
        var top=createPt3(ct,r,-Math.PI/2);
        var bottom=createPt3(ct,r,Math.PI/2);
        var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);
        gnt.addColorStop(0,"rgb(255,255,192)");
        gnt.addColorStop(1,"rgb(176,126,56)");
        drawSolidCircle(ctx,ct.x,ct.y,r,gnt);
        ctx.restore();

        // #3
        ctx.save();    
        var r=R*0.945;
        var top=createPt3(ct,r,-Math.PI/2);
        var bottom=createPt3(ct,r,Math.PI/2);
        var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);
        gnt.addColorStop(0,"rgb(252,248,184)");
        gnt.addColorStop(0.25,"rgb(228,182,74)");
        gnt.addColorStop(0.5,"rgb(229,224,154)");
        gnt.addColorStop(0.53,"rgb(152,94,58)");
        gnt.addColorStop(0.75,"rgb(254,250,188)");
        gnt.addColorStop(1,"rgb(229,184,77)");
        drawSolidCircle(ctx,ct.x,ct.y,r,gnt);
        ctx.restore();

        // #3
        ctx.save();    
        var r=R*0.90;
        var top=createPt3(ct,r,-Math.PI/2);
        var bottom=createPt3(ct,r,Math.PI/2);
        var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);
        gnt.addColorStop(0,"rgb(187,121,31)");
        gnt.addColorStop(1,"rgb(255,255,221)");
        drawSolidCircle(ctx,ct.x,ct.y,r,gnt);
        ctx.restore();

        // #4
        ctx.save();    
        var r=R*0.88;
        var top=createPt3(ct,r,-Math.PI/2);
        var bottom=createPt3(ct,r,Math.PI/2);
        var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);
        gnt.addColorStop(0,"rgb(255,255,194)");
        gnt.addColorStop(1,"rgb(198,142,57)");
        drawSolidCircle(ctx,ct.x,ct.y,r,gnt);
        ctx.restore();

        // #5 五星的渐变色
        ctx.save();    
        var r=R*0.88;
        var top=createPt3(ct,r,-Math.PI/2);
        var bottom=createPt3(ct,r,Math.PI/2);
        var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);
        gnt.addColorStop(0,"rgb(245,219,147)");
        gnt.addColorStop(1,"rgb(166,119,52)");
        ctx.restore();

        // #6 绘制十五颗星
        ctx.save();    
        var r=R*0.75;
        var n=15;
        var part=Math.PI*2/n;
        for(var i=0;i<n;i++){
            var theta=i*part-Math.PI/2;
            var p=createPt3(ct,r,theta);
            ctx.strokeStyle="rgb(254,246,179)";
            ctx.fillStyle=gnt;
            draw5Star(ctx,p.x,p.y,r/10,0);
            ctx.fill();
            ctx.stroke();
        }
        ctx.restore();

        // #7 
        ctx.save();    
        var r=R*0.62;
        var top=createPt3(ct,r,-Math.PI/2);
        var bottom=createPt3(ct,r,Math.PI/2);
        var gnt=ctx.createLinearGradient(top.x,top.y,bottom.x,bottom.y);
        gnt.addColorStop(0,"rgb(193,134,46)");
        gnt.addColorStop(1,"rgb(255,255,203)");
        drawSolidCircle(ctx,ct.x,ct.y,r,gnt);
        ctx.restore();

        // #8 
        ctx.save();    
        var r=R*0.60;
        drawSolidCircle(ctx,ct.x,ct.y,r,"black");
        ctx.restore();

        // #9 旗面
        ctx.save();    
        var r=R*0.595;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.clip();
        drawEnglishFlg(ctx,0,0,4*r,2*r,"rgb(204,0,1)","rgb(1,0,102)","white");
        ctx.restore();

        // #10 边缘加深
        ctx.save();    
        var r=R*0.595;
        var gnt=ctx.createRadialGradient(0,0,0,0,0,r);
        gnt.addColorStop(0,"rgba(120,120,120,0)");
        gnt.addColorStop(0.86,"rgba(120,120,120,0.2)");
        gnt.addColorStop(0.93,"rgba(120,120,120,0.4)");
        gnt.addColorStop(1,"rgba(120,120,120,0.6)");
        drawSolidCircle(ctx,0,0,r,gnt);
        ctx.restore();

        // #11 椭圆玻璃光
        ctx.save();        
        var r=R*0.595;        
        var gnt=ctx.createLinearGradient(0,-r,0,0);
        gnt.addColorStop(0,"rgba(255,255,255,0.7)");
        gnt.addColorStop(0.5,"rgba(255,255,255,0.3)");
        gnt.addColorStop(1,"rgba(255,255,255,0.1)");
        ctx.fillStyle=gnt;
        drawTuoYuan(ctx,0,-r*0.33,r*1.6,r*1.3); 
        ctx.fill();
        ctx.restore();
                        
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于绘制英国米字旗
ctx:绘图上下文
x:旗中心横坐标
y:旗中心纵坐标
width:旗宽
height:旗高
redColor:红色颜色
blueColor:蓝色颜色
whiteColor:白色颜色
----------------------------------------------------------*/
function drawEnglishFlg(ctx,x,y,width,height,redColor,blueColor,whiteColor){
    // 先铺背景色
    ctx.save();
    ctx.fillStyle=whiteColor;
    drawRect(ctx,x,y,width,height);
    ctx.fill();
    ctx.restore();

    const WD=width/60;// 宽度分为六十份
    const HD=height/30;// 高度分为三十份

    // 绘制中心十字之横线
    ctx.save();
    ctx.fillStyle=redColor;
    drawRect(ctx,x,y,60*WD,6*HD);
    ctx.fill();
    ctx.restore();

    // 绘制中心十字之竖线
    ctx.save();
    ctx.fillStyle=redColor;
    drawRect(ctx,x,y,6*WD,30*HD);
    ctx.fill();
    ctx.restore();

    // 求左右四小三角块之参数
    var theta=Math.atan(height/width);
    var triHeight=10*HD-3*HD/Math.cos(theta);
    var triWidth=triHeight/Math.tan(theta);

    // 右上三角块
    var c=createPt(30*WD,-5*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 右下三角块
    var c=createPt(30*WD,5*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 左上三角块
    var c=createPt(-30*WD,-5*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 左下三角块
    var c=createPt(-30*WD,5*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 求上下四大三角块之参数
    var theta=Math.atan(height/width);
    var triWidth=25*HD-3*HD/Math.sin(theta);
    var triHeight=triWidth*Math.tan(theta);

    // 上右三角块
    var c=createPt(5*WD,-15*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 上左三角块
    var c=createPt(-5*WD,-15*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 下右三角块
    var c=createPt(5*WD,15*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 下左三角块
    var c=createPt(-5*WD,15*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 绘制右上条带
    var theta=Math.atan(height/width);
    var a=createPt(30*WD,-15*HD);
    var b=createPt(a.x-10*HD/Math.tan(theta),a.y+10*HD);
    var c=createPt(b.x-2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x-2*HD/Math.sin(theta),a.y);
    drawBelt(ctx,a,b,c,d,redColor);

    // 绘制左下条带
    var theta=Math.atan(height/width);
    var a=createPt(-30*WD,15*HD);
    var b=createPt(a.x+10*HD/Math.tan(theta),a.y-10*HD);
    var c=createPt(b.x+2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x+2*HD/Math.sin(theta),a.y);
    drawBelt(ctx,a,b,c,d,redColor);

    // 绘制左上条带
    var theta=Math.atan(height/width);
    var a=createPt(-30*WD,-15*HD);
    var b=createPt(a.x+10*HD/Math.tan(theta),a.y+10*HD);
    var c=createPt(b.x-2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x,a.y+2*HD/Math.cos(theta));
    drawBelt(ctx,a,b,c,d,redColor);

    // 绘制左下条带
    var theta=Math.atan(height/width);
    var a=createPt(30*WD,15*HD);
    var b=createPt(a.x-10*HD/Math.tan(theta),a.y-10*HD);
    var c=createPt(b.x+2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x,a.y-2*HD/Math.cos(theta));
    drawBelt(ctx,a,b,c,d,redColor);
}

// 绘制四边形带子，drawEnglishFlg的跟班函数
function drawBelt(ctx,a,b,c,d,fillStyle){
    ctx.save();
    ctx.fillStyle=fillStyle;
    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.lineTo(c.x,c.y);
    ctx.lineTo(d.x,d.y);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// 绘制三角线块，drawEnglishFlg的跟班函数
function drawTriangle(ctx,c,b,a,fillStyle){
    ctx.save();
    ctx.fillStyle=fillStyle;
    ctx.beginPath();
    ctx.moveTo(c.x,c.y);
    ctx.lineTo(b.x,b.y);
    ctx.lineTo(a.x,a.y);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

/*------------------------------------------------------------------------
 函数：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();
}

/*-------------------------------------------------------------
英联邦（Commonwealth of Nations）是一个国际组织，
由56个独立主权国家（包括附属国）所组成，
成员大多为前英国殖民地或者保护国，
现任英联邦元首
查尔斯·菲利普·亚瑟·乔治·蒙巴顿-温莎国王
则身兼包括英国在内的15个英联邦王国的国家元首，
此15国构成了一个现代版的共主邦联。
--------------------------------------------------------------*/
//-->
</script>

END

Python实现电子词典（图形界面）
weixin_30586257的博客
08-14 6757
Python实现电子词典（图形界面） 终端电子词典：https://www.cnblogs.com/noonjuan/p/11341375.html 文件一览： .├── client.py├── data.py├── dic.csv├── func.py├── pics│ ├── pic_login.jpg│ ├── pic_main.jpg│ └── pic_sig...
4、6word
weixin_38170829的博客
05-06 2万+
英语四级+六级词汇大全（全部带“音标”） 第一部分：四级词汇大全 A abandon/ ə’bændən/ vt.丢弃；放弃，抛弃 　　aboard/ ə’bɔ:d/ ad.在船(车)上；上船 　　absolute/ ‘æbsəlu:t/ a.绝对的；纯粹的 　　absolutely/ ‘æbsəlu:tli/ ad.完全地；绝对地 　　absorb...
【Canvas与徽章】英联邦徽章
一念非凡(46岁待业程序员)
04-20 923
用Html5/Canvas绘制英联邦徽章，非按设定标准制图。
IT 常用词汇（一）
勿忘初心
08-21 1万+
1, amend [ə’mend] vt. 修改；改善，改进 vi. 改正，改善；改过自新 n. (Amend)人名；(德、英)阿门德 2, bearer [‘bɛrɚ] n. 持票人；[建] 承木；[机] 托架；送信人；搬运工人 3, capped [capped] v. 给…戴帽；去蒂；覆以…；除去盖子；胜过（cap的过去分词形式） adj. 包过的；加盖的；去蒂的 4
简单英译汉SQL脚本
热门推荐
shencomd的专栏
10-19 19万+
create table t_dictionary(word varchar(200), trans varchar(1000)); insert into t_dictionary values('abandon','v.抛弃，放弃'); insert into t_dictionary values('abandonment','n.放弃'); insert into t_dictionary
6级大纲词汇
马如林的IT博客
04-26 5234
 如下：abnormal/ Ab5nR:mEl/a.不正常的；变态的 abolish/ E5bRliF/vt.废除，取消 abrupt/ E5brQpt/a. 突然的，意外的，唐突的 absurd/ Eb5sE:d/a.不合理的，荒唐的 abundance/ E5bQndEns/n.丰富，充裕 academy/ E5kAdEmi/n.私立中学；专科院校 accessory/ Ak5sesEri
元宇宙引擎脑语言2500令v0.5.6
脑语言
02-08 1万+
　　脑语言一令是一个不断变化的过程，而我们的能力也十分有限，对于翻译不准确、表达不合适、定义不严谨、意思不合理等等问题都是我做得还不够好的原因，欢迎指正与交流，以便通过“共产”的方式让“广集天下智慧”的机制及早在人类世界建立。 　　过去，我们总是想让AI更接近人类，脑语言的存在也是为了让人类的能力更接近AI
51c大模型~合集155
whaosoft~aiotの开发板商城
07-16 1784
具体而言，研究团队利用加权融合的方式在解码前将来自视觉对齐层的知识与全局信息结合，从而优化模型输出，既保留了语义信息，又减少了幻觉的产生。对于新的测试图像，该阈值可以确保生成的2D关键点置信区间（一系列以预测均值为中心，以协方差和阈值为半径的圆形区域）能够以用户预先设定的概率（例如 ）覆盖所有真实的关键点位置。实验结果表明，该方法在保证相近的真实位姿覆盖率的前提下，推理速度提升超过33%，并且生成的置信区间体积大幅度缩小——旋转置信区间体积最多减小99.9%，平移置信区间体积最多减小99.8%。
vue 官方推荐的好用的三方库
taotaobaobei的博客
12-31 3万+
自述文件 非常棒的存储库徽标 很棒的Vue.js 太棒了 与Vue.js相关的精彩内容精选清单 资源资源 官方资源 外部资源 工作门户 社区 会议活动 播客 YouTube频道 官方例子 讲解 例子 图书 博客文章 培训班 纪录片 使用Vue.js的项目 开源的 商业产品 应用/网站 互动体验 企业用途 A11y 组件和库 UI组件 表 通知 装载机 进度条 工具提示 覆盖 视差 图示 选框 菜单 减号加输入 轮播 图表 时间 日历 地图 音频视频 无限滚动 拉到刷新 降价促销 PDF格式 树 图形
脑语言v0.5.8 2500令【单字编程】
脑语言
07-11 2万+
这是脑语言v0.5.8版的2500个单字（也称为“令”与“一令”），通过【单字编程】（并不仅是中文编程，而是混合英文关键字，但以单字为主的命名）也许是英文不太好时又希望能写代码的其中一种方式。 我在做脑语言【单字编程】系列的教程，先是《JavaScript单字编程》欢迎参与！ ...
canvas-badges:死简单的帆布徽章
07-02
《canvas-badges：轻松构建帆布徽章的JavaScript库》 HTML5的画布元素Canvas为Web开发者提供了一个强大的2D绘图平台，可以用于动态图像生成和各种视觉效果的实现。"canvas-badges"项目正是利用了这一特性，提供了一...
【愚公系列】《微信小程序与云开发从入门到实践》022-canvas(画布)组件及应用
时光隧道
09-08 6万+
随着移动互联网的发展，视觉内容在用户体验中的重要性日益凸显。微信小程序的canvas（画布）组件为开发者提供了强大的绘图能力，使得在小程序中自由创作和展示各种图形、动画和图像成为可能。无论是创建游戏、展示创意图表，还是实现个性化的用户界面，canvas组件都能带来无限的创作空间和灵活性。在本篇文章中，我们将深入探讨微信小程序的canvas组件及其应用场景。我们将介绍canvas的基本使用方法，包括如何绘制基本图形、处理图片、实现动态效果等。
canvas绘制五角星
xm2by的博客
02-18 5449
canvas绘制五角星 在canvas中绘制五角星，主要是利用canvas中path（路径）来绘制，首先确定五角星上A到J这10个点的坐标，如下图所示： 这里面用到了一些简单的数学知识：角AOC、COE、EOG、GOI、IOA的值为72°，角AOB、BOC、COD、DOE、EOF、FOG、GOH、HOI、IOJ、JOA的值为36°。 当以O为坐标系原点时，根据大圆、小圆的半径，可以计算出C点坐标为...
自定义控件三部曲之绘图篇（十三）——Canvas与图层(一)
启舰
05-04 2万+
前言：猛然知道姥姥79了，我好怕，好想哭 系列文章： Android自定义控件三部曲文章索引：http://blog.csdn.net/harvic880925/article/details/50995268 在给大家讲解了paint的几个方法之后，我觉得有必要插一篇有关Canvas画布的知识,在开始paint之前，我们讲解了canvas绘图的几篇文章和cavas的save...
电子商务基于Python的个性化推荐系统设计：商品在线购物平台用户画像构建与智能推荐算法实现 项目介绍 基于Python的个性化商品在线购物平台设计和实现的详细项目实例（含模型描述及部分示例代码）
10-07
内容概要：本文详细介绍了一个基于Python的个性化商品在线购物平台的设计与实现，重点围绕个性化推荐系统展开。平台通过采集用户行为数据（如浏览、购买记录），结合机器学习算法（如协同过滤、内容推荐、矩阵分解及深度学习）构建用户画像，实现精准的商品推荐。项目涵盖数据采集与清洗、推荐算法优化、大数据实时处理、用户隐私保护以及系统可扩展性与稳定性等多个关键技术环节，并提出相应的解决方案，如使用Pandas/NumPy进行数据预处理，Spark进行分布式计算，微服务架构提升系统弹性等。平台旨在提升用户体验、增加销售额、优化数据分析能力、增强用户粘性与市场竞争力，同时推动电商领域的技术创新。; 适合人群：具备一定Python编程基础和数据分析能力，熟悉机器学习算法及Web开发的初、中级开发者或计算机专业学生，适合从事电商系统开发、推荐系统研究的相关技术人员； 使用场景及目标：①学习如何在实际项目中应用协同过滤、矩阵分解等推荐算法；②掌握从数据采集、清洗到建模推荐的全流程实现；③了解高并发、大数据场景下的系统架构设计方法；④构建可落地的个性化电商平台原型用于教学、科研或创业参考； 阅读建议：建议结合文中提到的模型描述与示例代码进行实践操作，重点关注推荐算法的选型与调优过程，同时注意系统安全性与用户隐私保护的设计细节，在真实环境中逐步迭代和完善功能。
【相控阵雷达跟踪】多目标跟踪的联合阵列资源分配和发射波束设计方法（Matlab代码实现）
10-07
内容概要：本文介绍了基于Matlab代码实现的多目标跟踪中联合阵列资源分配与发射波束设计方法，聚焦于相控阵雷达系统中的关键优化问题。通过算法设计实现对多个目标的有效跟踪，同时优化雷达资源的分配与波束方向控制，提升系统探测精度与效率。文中结合仿真代码，展示了该方法的技术实现路径与实际应用效果，体现了其在雷达信号处理与多目标监控中的工程价值。; 适合人群：具备雷达系统、信号处理或优化算法背景，熟悉Matlab编程的研究生、科研人员及从事雷达工程开发的技术人员。; 使用场景及目标：①用于相控阵雷达在复杂环境中对多目标的高效跟踪；②为雷达资源调度与波束成形联合优化提供算法参考与代码实现范例；③支持科研仿真验证与工程原型开发。; 阅读建议：建议结合Matlab代码进行仿真实践，深入理解资源分配与波束设计的耦合关系，并可进一步扩展至动态环境或多传感器协同场景下的算法优化。【相控阵雷达跟踪】多目标跟踪的联合阵列资源分配和发射波束设计方法（Matlab代码实现）
SWT32bit和64bit库
最新发布
10-07
【源码免费下载链接】：https://renmaiwang.cn/s/7h2xc SWT，全称为Standard Widget Toolkit，是Java编程中用于创建图形用户界面（GUI）的一种开源库，由Eclipse基金会维护。SWT设计的目标是提供一个更高效、更原生的GUI，与Java标准库中的Abstract Window Toolkit (AWT) 和Swing相比，SWT能够更好地利用操作系统提供的功能，从而实现更快的性能和更好的用户体验。标题“SWT32位和64位库”主要关注的是SWT库在不同处理器架构下的适配性。在计算机硬件领域，32位和64位系统分别对应不同的处理器架构，主要区别在于处理数据的能力和内存寻址范围。32位系统最多可以寻址4GB内存，而64位系统则支持更大内存，并且可以处理更大的数据量。对于SWT库来说，32位版本是为运行在32位操作系统的Java应用程序设计的，如Windows XP、Windows 7 32位版等。64位版本则是为64位操作系统如Windows 7、Windows 10 64位版准备的。两者不能混用，因为它们的内部结构和调用方式存在差异，64位库无法在32位环境中运行，反之亦然。SWT库的32位和64位版本在编译和运行时需要与JVM（Java虚拟机）的位数匹配。例如，如果你的JVM是32位的，那么你的SWT库也必须是32位；如果JVM是64位，SWT库就必须是64位。不匹配的情况下，程序将无法正常启动或运行，可能会出现错误提示。在实际开发中，开发者需要根据目标用户的系统环境来选择合适的SWT库。如果不确定用户的系统位数，可以提供两种版本的软件安装包，或者使用自动检测系统架构并加载相应库的技术。SWT库的子文件通常包含了各种操作系统平台的特定实现，因为SWT的目标是提供原生的外观和行为，所以它会利用操作系统提供的控件和API。
张正友相机标定Opencv实现（完整程序+棋盘图）实例源码
10-07
张正友相机标定Opencv实现，附棋盘图和14张不同角度标定图。 包含完整的工程代码，有详细的注释说明，一键运行。实现了相机标定、输出相机内参、外参、旋转和平移矩阵、标定效果评价、以及使用标定结果对原始棋盘图进行矫正。
吉时利2400系列数字源表测试软件V12.647.002安装包
10-07
#### 标题解析 - **Ke2400S Measurement Software-V12.647-Installation Package.zip.zip** - 这个标题指向了一个安装包文件，通过文件扩展名“.zip.zip”可以看出这是一个已经压缩过的压缩包，它的内部可能包含了一个或多个文件或文件夹，这些文件和文件夹被进一步压缩以形成一个可以下载和分发的单一文件。标题中的“Ke2400S”可能指代软件名称或型号的一部分。而“V12.647”表明这是版本号为12.647的软件。 #### 描述解析 - **Keithley 2400系列数字源表Sourcemeter测试软件-V12.647.002** - 描述开始提到的“Keithley 2400系列”指的是美国吉时利仪器公司（Keithley Instruments, Inc.）生产的一系列精密测量设备，具体是2400型数字源表，它具备数字多用表和精密电源的功能，适用于多种测试环境。 - “数字源表Sourcemeter测试软件”是专为2400系列设备设计的软件工具，能够通过精确的电压源和电流源驱动设备，并能够对电流与电压进行精确测量。这在许多需要高精度测试的应用中十分关键，比如半导体器件的特性测试、组件的I-V（电流-电压）特性测试等。 - 版本号“V12.647.002”是该软件的更新版本，这意味着用户下载此软件可以获得最新的功能增强、错误修复以及可能的性能改进。 #### 标签解析 - **Keithley 吉时利 太阳电池测试 数字源表 Sourcemeter** - 标签中列出的“Keithley”和“吉时利”指的是同一家公司，表明软件与该公司的设备兼容。 - “太阳电池测试”意味着该软件或硬件适用于测试太阳电池（太阳能电池板），涉及到对太阳电池的I-V特性曲线、效率、最大功率
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值