【Canvas与徽章】盾形银底红带Best Quality Premium徽章

于 2024-10-07 12:02:48 发布
阅读量405 收藏 5
点赞数 13
分类专栏： 徽章 文章标签： canvas 徽章 盾形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/142738096
版权

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>BestQulity金属牌Draft3</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=198;// 基准尺寸

        // 1圈
        ctx.save();
        ctx.shadowOffsetY=8; // 设置阴影
        ctx.shadowColor="grey";
        ctx.shadowBlur=6;
        var r=R*1.00;
        ctx.fillStyle="white";
        drawShield(ctx,0,-R*0.02,r);
        ctx.fill();
        ctx.restore();

        // 2圈
        ctx.save();
        var r=R*0.99;
        var gnt1=ctx.createLinearGradient(0,-r,0,r);
        gnt1.addColorStop(0,"rgb(243,243,243)");
        gnt1.addColorStop(0.3,"rgb(171,171,171)");
        gnt1.addColorStop(0.6,"rgb(101,101,101)");
        gnt1.addColorStop(0.7,"rgb(114,114,114)");
        gnt1.addColorStop(0.8,"rgb(97,97,97)");
        gnt1.addColorStop(0.9,"rgb(87,87,87)");
        gnt1.addColorStop(1,"rgb(156,156,156)");
        ctx.fillStyle=gnt1;
        drawShield(ctx,0,0,r);
        ctx.fill();
        ctx.restore();

        // 3圈
        ctx.save();
        var r=R*0.94;
        ctx.fillStyle="black";
        drawShield(ctx,0,0,r);
        ctx.fill();
        ctx.restore();

        // 4圈
        ctx.save();
        var r=R*0.93;
        var gnt1=ctx.createLinearGradient(-r,-r,r,r);
        gnt1.addColorStop(0,"rgb(208,208,208)");
        gnt1.addColorStop(0.33,"rgb(244,244,244)");
        gnt1.addColorStop(0.5,"rgb(203,203,203)");
        gnt1.addColorStop(0.67,"rgb(246,246,246)");
        gnt1.addColorStop(1,"rgb(187,187,187)");
        ctx.fillStyle=gnt1;
        drawShield(ctx,0,0,r);
        ctx.fill();
        ctx.restore();

        // BEST文字
        ctx.save();
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.font = r*0.50+"px Bahnschrift SemiBold SemiConden";
        ctx.fillStyle="black";
        ctx.fillText("BEST",0,-r*0.56);
        ctx.restore();

        // QUALITY文字
        ctx.save();
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.font = r*0.33+"px Bahnschrift SemiBold SemiConden";
        ctx.fillStyle="black";
        ctx.fillText("QUALITY",0,-r*0.13);
        ctx.restore();

        // 红带
        ctx.save();
        var r=R*0.99;        
        var width=r/4*3.4;
        var gnt1=ctx.createLinearGradient(-width,0,width,0);
        gnt1.addColorStop(0,"rgb(111,1,2)");
        gnt1.addColorStop(0.1,"rgb(162,3,7)");
        gnt1.addColorStop(0.25,"rgb(182,2,4)");
        gnt1.addColorStop(0.5,"rgb(208,2,4)");
        gnt1.addColorStop(0.75,"rgb(182,2,4)");
        gnt1.addColorStop(0.9,"rgb(162,3,7)");
        gnt1.addColorStop(1,"rgb(111,1,2)");
        ctx.fillStyle=gnt1;
        drawRect(ctx,0,r/3,2*width,r/2);
        ctx.fill();
        ctx.restore();

        // PRESMIUM文字
        ctx.save();
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.font = r*0.25+"px Bahnschrift SemiBold SemiConden";
        ctx.fillStyle="white";
        ctx.fillText("PRESMIUM",0,r*0.36);
        ctx.restore();

        // 绘制五星
        ctx.save();
        var r=R*0.99;        
        var width=r/4*3.4;
        var margin=width/4;
        var n=5;
        var w=(2*width-2*margin)/(n-1);

        // 中间三星
        for(var i=-1;i<=1;i++){            
            var radius=r*0.15-Math.abs(i)*r/30;
            var a=createPt(i*w,r*0.77+radius*Math.tan(Math.PI/10));

            ctx.save();
            ctx.translate(a.x,a.y);
            var gnt=ctx.createRadialGradient(0,0,0,0,0,radius);
            gnt.addColorStop(0,"red");
            gnt.addColorStop(1,"rgb(117,0,0)");
            ctx.fillStyle=gnt;
            draw5Star(ctx,0,0,radius);
            ctx.fill();
            ctx.restore();
        }

        // 边上两星
        w*=0.9;
        for(var i=-2;i<=2;i+=4){            
            var radius=r*0.15-Math.abs(i)*r/30;
            var a=createPt(i*w,r*0.77+radius*Math.tan(Math.PI/10));

            ctx.save();
            ctx.translate(a.x,a.y);
            var gnt=ctx.createRadialGradient(0,0,0,0,0,radius);
            gnt.addColorStop(0,"red");
            gnt.addColorStop(1,"rgb(117,0,0)");
            ctx.fillStyle=gnt;
            draw5Star(ctx,0,0,radius);
            ctx.fill();
            ctx.restore();
        }
        
        ctx.restore();
                
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*--------------------------------------------------
函数:绘制正五角星
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){
    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;
        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:矩形中心纵坐标
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:盾牌中心纵坐标
radius:半径，即盾牌高度的一半
----------------------------------------------------------*/
function drawShield(ctx,x,y,radius){
    const R=radius;// 接参数
    const H=R;// 一半高度
    const H1=H/5;// 隆起高度
    const W=H/4*3.4;// 一半宽度
    const R1=R/20;// 小圆半径
    const R2=2.5*R1;// 大圆半径
    const ALPHA=Math.atan(H1/W);//隆起角度

    var a=createPt(x-W,y-H);
    var r=R1;
    var angle=0;
    var a1=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));
    r=R1;
    angle=Math.PI/2;
    var a2=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));

    var b=createPt(x-W,y+H);
    r=R1;
    angle=-Math.PI/2;
    var b1=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));
    r=R1;
    angle=ALPHA;
    var b2=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));

    var c=createPt(x,y+H+H1);
    r=R2;
    angle=Math.PI+ALPHA;
    var c1=createPt(c.x+r*Math.cos(angle),c.y+r*Math.sin(angle));
    r=R2;
    angle=-ALPHA;
    var c2=createPt(c.x+r*Math.cos(angle),c.y+r*Math.sin(angle));

    var d=createPt(x+W,y+H);
    r=R1;
    angle=Math.PI-ALPHA;
    var d1=createPt(d.x+r*Math.cos(angle),d.y+r*Math.sin(angle));
    r=R1;
    angle=-Math.PI/2;
    var d2=createPt(d.x+r*Math.cos(angle),d.y+r*Math.sin(angle));

    var e=createPt(x+W,y-H);
    r=R1;
    angle=Math.PI/2;
    var e1=createPt(e.x+r*Math.cos(angle),e.y+r*Math.sin(angle));
    r=R1;
    angle=-Math.PI;
    var e2=createPt(e.x+r*Math.cos(angle),e.y+r*Math.sin(angle));
    
    
    ctx.beginPath();
    ctx.moveTo(a1.x,a1.y);
    ctx.quadraticCurveTo(a.x,a.y,a2.x,a2.y);
    ctx.lineTo(b1.x,b1.y);
    ctx.quadraticCurveTo(b.x,b.y,b2.x,b2.y);
    ctx.lineTo(c1.x,c1.y);
    ctx.quadraticCurveTo(c.x,c.y,c2.x,c2.y);
    ctx.lineTo(d1.x,d1.y);
    ctx.quadraticCurveTo(d.x,d.y,d2.x,d2.y);
    ctx.lineTo(e1.x,e1.y);
    ctx.quadraticCurveTo(e.x,e.y,e2.x,e2.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();
}

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

普兰店拉马努金
关注
专栏目录
Openlayers 教程 15 - openlayers 设置蓝黑色底图，自定义修改天地图颜色
linzi19900517的博客
09-15 1万+
项目大屏展示添加动态地图，获取瓦片，修改颜色来实现加载天地图蓝黑色底图。
简单的Canvas刮刮乐带动画效果的实例
蜗牛的专栏
12-25 5723
今天做了个刮刮乐领奖品的小活动，感觉挺有用的，整理在这儿记录下上个效果图先：加了个简单的 css 动画效果下面贴上主要代码:index.html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=0, user-scalable=0
odoo website_15专家使用的Website Builder软件
从零开始的教程世界
07-13 1137
odoo websiteMany freelancers, website builder, developers and companies ask the same question, “How can experts manage so many projects at the same time? What Website Builder Software and Tools they u...
用C语言写一个查单词的小demo
m0_47068593的博客
07-03 4万+
用C语言写一个查单词的小demo #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) { // 用只读的方式打开我们的单词库 FILE *fp = fopen("dict.txt","r"); if (NULL == fp){ perror("fopen"); return -1
网络编程_8(项目附件)
weixin_38717634的博客
01-13 3万+
dict.txt abandonment n.放弃 abbreviation n.缩写 abeyance n.缓办，中止 abide v.遵守 ability n.能力 able adj.有能力的，能干的 abnormal adj.反常的，变态的 aboard adv.船(车)上 abolish v.废除，取消 abolition n.废除，取消 abortion n.流产 abortive adj.无效果的，失败的 about prep.关于，大约 ab
4、6word
weixin_38170829的博客
05-06 1万+
英语四级+六级词汇大全（全部带“音标”） 第一部分：四级词汇大全 A abandon/ ə’bændən/ vt.丢弃；放弃，抛弃 　　aboard/ ə’bɔ:d/ ad.在船(车)上；上船 　　absolute/ ‘æbsəlu:t/ a.绝对的；纯粹的 　　absolutely/ ‘æbsəlu:tli/ ad.完全地；绝对地 　　absorb...
字典查询（部分）
myth_HG的专栏
05-28 14万+
#include #include #include using namespace std; const int enMax=46; const int chMax=256; const int attrMax = 66; const int spaceMax = 100; const int inputMax = 30; char atrrSum[13][attrMax]= {"n.","
简单英译汉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
canvas-绘制圆形
nicecode
07-27 5289
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
OpenLayers imageCanvas的使用与问题解决---Canvas图层与底图图层范围不一致
wxqqq666的博客
10-24 3595
前言 h5 画布要想进行地理坐标相关的绘图如何能保证与底图上的位置相一致呢？这个问题一定会困惑刚刚进行地理数据前端可视化的你，其实目前我有两种解决方法解决这个问题，一种将画布大小设为与浏览器视口大小一致，然后将其添加到document对象上，每当地图范围变化时重新计算画布四个角的extent.第二种方法就是今天要说的使用ol.source.ImageCanvas，这个类（目前最新版本ol已经采用E...
HTML5画布（canvas）绘制三角形，矩形，圆形
yangaoyuan1999的博客
09-29 9385
canvas标签： <canvas id="cavsElem" width="400" height="300">您的浏览器不支持canvas</canvas> 1.定义id属性是为了在JavaScript代码中引用元素 2.标签中间的文字在浏览器不支持canvas的情况下才会显示 3.canvas标签与img标签一样，有两个原生属性width和height 默认300*500像素 4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形 要在画布中绘
循环荷载三轴 pfc5.0 PFC5.0
10-06
循环荷载三轴 pfc5.0 PFC5.0
光伏储能同步发电机simulink仿真模型 主电路：三相全桥逆变 直流侧电压800V 光伏模块：光伏板结合Boost电路应用MP
10-06
光伏储能同步发电机simulink仿真模型 主电路：三相全桥逆变 直流侧电压800V 光伏模块：光伏板结合Boost电路应用MPPT 储能模块：采用双闭环控制，外环直流母线电容稳压，内环为电池电流环控制 Matlab simulink 2021b及以上版本 仿真结果： 1.VSG仿真输出的功率可以无静差跟踪给定参考值 2.直流母线电容电压可以实现稳压功能，稳定时可以跟踪给定参考电压值 3.光伏模块MPPT算法输出最大功率波动很小，波形完美 4.在1s的时候给定直流母线电压参考值由800降为700V，可看到能够很好跟踪给定参考电压值 VSG输出电压电流THD都低于1%
深入剖析Oracle与MySQL在数据安全性方面的差异
10-06
数据库的安全性是任何依赖数据库存储敏感信息的组织最关心的问题之一。Oracle和MySQL作为两个主流的数据库管理系统，在数据安全性方面各有所长。本文将深入探讨Oracle与MySQL在数据安全性方面的差异，包括它们提供的安全性特性、最佳实践以及代码示例。 Oracle和MySQL在数据安全性方面都提供了强大的功能，但它们在特性和方法上存在差异。Oracle的安全性特性更为全面和高级，适合对安全性要求极高的企业级应用。MySQL则提供了基本的安全性功能，适合中小型项目和Web应用。了解这些差异有助于开发者在不同数据库系统间进行数据迁移或开发数据库应用程序时做出正确的选择。通过本文的分析和代码示例，读者应该能够更好地理解Oracle与MySQL在数据安全性方面的差异，并在实际开发中做出合适的选择。
深圳大学校园网自动登录脚本,适用于使用Drom客户端的校园网登录验证系统。对配置文件中的密码进行加密.zip
最新发布
10-06
项目学习分享。【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
MATLAB直线倒立摆一阶倒立摆LQR控制仿真，小车倒立摆起摆和平衡控制，附带参考文献 三种控制方法对比 pd控制、lqr控制、
10-06
MATLAB直线倒立摆一阶倒立摆LQR控制仿真，小车倒立摆起摆和平衡控制，附带参考文献 三种控制方法对比 pd控制、lqr控制、mpc模型预测控制
2020年计算机等级考试复习题及答案.pdf
10-06
计算机试题试卷课件
C# winform yolov11-onnx实例分割模型部署源码.7z
10-06
【测试环境】 vs2019 net framework4.7.2 opencvsharp4.8.0 onnxruntime1.16.3  视频演示：https://www.bilibili.com/video/BV1yu1qYaE5K/ 博文地址：https://blog.csdn.net/FL1623863129/article/details/142727953
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值