【Canvas与艺术】绘制金色Brand Award品牌嘉奖奖章

已于 2024-09-07 23:49:42 修改
阅读量270 收藏 9
点赞数 4
分类专栏： 徽章 文章标签： html5 canva可画
于 2024-04-07 14:29:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/137463030
版权

【关键点】

金丝是用贝塞尔曲线画出环形波纹线，然后循环五次；

金盘是将底图旋转而成，达成左上角亮右下角暗的效果；

树枝上树叶是用贝塞尔二次曲线画出，起止点和控制点构成一个正方形。

【成果图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>金色Brand Award品牌嘉奖</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>
            <img id="myImg" src="120.jpg" style="display:none;"/>
        </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){
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){
        
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    

        // 斜45°线性渐变色
        var vgrd=ctx.createLinearGradient(-240,-240,240,240);
        vgrd.addColorStop(0,"rgb(255,255,170)");
        vgrd.addColorStop(1,"rgb(140,140,0)");

        // 波纹形外圈
        for(var i=0;i<5;i++){
            ctx.save();
            ctx.rotate(Math.PI/180*2*i);
            var arr=createWaveCircleArray(144,240,20);
            ctx.beginPath();
            for(var j=0;j<arr.length-2;j+=2){
                var pt1=arr[j];
                var pt2=arr[j+1];// 控制点
                var pt3=arr[j+2];            
                ctx.lineTo(pt1.x,pt1.y);
                ctx.quadraticCurveTo(pt2.x,pt2.y,pt3.x,pt3.y);
            }
            ctx.closePath();
            ctx.lineWidth=2;
            ctx.strokeStyle=vgrd;
            ctx.stroke();
            ctx.restore();
        }

        // 用圆去切取背景图成黄铜底
        ctx.save();
        ctx.rotate(Math.PI/2*3);
        ctx.beginPath();
        ctx.arc(0,0,228,0,Math.PI*2,true);
        ctx.closePath();
        ctx.lineWidth=4;
        var gnt=ctx.createLinearGradient(0,-170,0,170);        
        gnt.addColorStop(0,"rgb(224,174,77)");
        gnt.addColorStop(1,"rgb(85,43,5)");
        ctx.strokeStyle=gnt;
        ctx.stroke();
        ctx.clip();        
        var img=document.getElementById("myImg");
        ctx.drawImage(img,40,40,240,240,-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();

        // 金属圈
        ctx.beginPath();
        ctx.arc(0,0,210,0,Math.PI*2,true);
        ctx.closePath();
        ctx.lineWidth=2;
        ctx.strokeStyle=vgrd;
        ctx.stroke();

        // 黑底
        ctx.beginPath();
        ctx.arc(0,0,207,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fillStyle="rgb(14,22,26)";
        ctx.fill();

        // 间隔色
        var r=207;
        for(var i=0;i<6;i++){
            var startAngle=i*Math.PI/3-Math.PI/18-Math.PI/2;
            var x1=r*Math.cos(startAngle);
            var y1=r*Math.sin(startAngle);

            var endAngle=startAngle+Math.PI/9;
            var x2=r*Math.cos(endAngle);
            var y2=r*Math.sin(endAngle);

            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(x1,y1);
            ctx.arc(0,0,r,startAngle,endAngle,false);
            ctx.closePath();
            ctx.fillStyle="rgba(91,111,125,0.3)";
            ctx.fill();
        }

        // 中心五星加文字
        //draw5Star(ctx,0,-150,20,"rgb(253,238,181)");

        // 上方五星
        ctx.beginPath();
        ctx.moveTo(-70,-150);
        ctx.lineTo(-18,-150);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="rgb(253,238,181)";
        ctx.stroke();        
        draw5Star(ctx,0,-150,14,"rgb(253,238,181)");
        ctx.beginPath();
        ctx.moveTo(70,-150);
        ctx.lineTo(18,-150);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="rgb(253,238,181)";
        ctx.stroke();

        // Brand Award
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "60px Stencil Std";
        ctx.fillStyle="rgb(253,238,181)";
        ctx.fillText("BRAND",0,-20);
        ctx.font = "50px Stencil Std";
        ctx.fillText("AWARD",0,40);

        ctx.font = "40px 仿宋";
        ctx.fillText("品牌嘉奖",0,90);

        // --------右半圈橄榄枝
        // 半圆
        const radius=170;
        const leaveLength=40;
        ctx.beginPath();
        ctx.arc(0,0,radius,Math.PI*(-3/2)-Math.PI/20,Math.PI*(-1/3)+Math.PI/20,true);
        ctx.lineWidth=1;
        ctx.strokeStyle="rgb(253,238,181)";
        ctx.stroke();
    
        // 外侧叶子
        for(var i=1;i<17;i++){
            var ratio=(i+30)/60;

            var theta=-Math.PI/3*1+i*Math.PI/20;
            var start={};
            start.x=radius*Math.cos(theta);
            start.y=radius*Math.sin(theta);

            var end1={};
            end1.x=start.x+ratio*leaveLength*Math.cos(-Math.PI/4+theta);
            end1.y=start.y+ratio*leaveLength*Math.sin(-Math.PI/4+theta);

            var center={};
            center.x=(start.x+end1.x)/2;
            center.y=(start.y+end1.y)/2;

            // 利用复数求c1
            var c1={};
            c1.x=center.x+center.y-end1.y;
            c1.y=end1.x-center.x+center.y;

            // 利用复数求c2
            var c2={};
            c2.x=center.x+center.y-start.y;
            c2.y=start.x-center.x+center.y;

            ctx.beginPath();
            ctx.lineTo(start.x,start.y);    
            ctx.quadraticCurveTo(c1.x,c1.y,end1.x,end1.y);
            ctx.quadraticCurveTo(c2.x,c2.y,start.x,start.y);
            ctx.closePath();
            ctx.fillStyle="rgb(253,238,181)";
            ctx.fill();
        }

        // 内侧叶子
        for(var i=1;i<17;i++){
            var ratio=(i+30)/60;

            var theta=-Math.PI/3+i*Math.PI/20;
            var start={};
            start.x=radius*Math.cos(theta);
            start.y=radius*Math.sin(theta);

            var end1={};
            end1.x=start.x+ratio*leaveLength*Math.cos(-Math.PI/4*3+theta);
            end1.y=start.y+ratio*leaveLength*Math.sin(-Math.PI/4*3+theta);

            var center={};
            center.x=(start.x+end1.x)/2;
            center.y=(start.y+end1.y)/2;

            // 利用复数求c1
            var c1={};
            c1.x=center.x+center.y-end1.y;
            c1.y=end1.x-center.x+center.y;

            // 利用复数求c2
            var c2={};
            c2.x=center.x+center.y-start.y;
            c2.y=start.x-center.x+center.y;

            ctx.beginPath();
            ctx.lineTo(start.x,start.y);    
            ctx.quadraticCurveTo(c1.x,c1.y,end1.x,end1.y);
            ctx.quadraticCurveTo(c2.x,c2.y,start.x,start.y);
            ctx.closePath();
            ctx.fillStyle="rgb(253,238,181)";
            ctx.fill();
        }

        // --------左半圈橄榄枝
        // 半圆
        ctx.beginPath();
        ctx.arc(0,0,radius,Math.PI*(-4/6)-Math.PI/20,Math.PI*(-3/2)+Math.PI/20,true);
        ctx.lineWidth=1;
        ctx.strokeStyle="rgb(253,238,181)";
        ctx.stroke();
    
        // 外侧叶子
        for(var i=1;i<17;i++){
            var ratio=(i+30)/60;

            var theta=-Math.PI/3*2-i*Math.PI/20;
            var start={};
            start.x=radius*Math.cos(theta);
            start.y=radius*Math.sin(theta);

            var end1={};
            end1.x=start.x+ratio*leaveLength*Math.cos(Math.PI/4+theta);
            end1.y=start.y+ratio*leaveLength*Math.sin(Math.PI/4+theta);

            var center={};
            center.x=(start.x+end1.x)/2;
            center.y=(start.y+end1.y)/2;

            // 利用复数求c1
            var c1={};
            c1.x=center.x+center.y-end1.y;
            c1.y=end1.x-center.x+center.y;

            // 利用复数求c2
            var c2={};
            c2.x=center.x+center.y-start.y;
            c2.y=start.x-center.x+center.y;

            ctx.beginPath();
            ctx.lineTo(start.x,start.y);    
            ctx.quadraticCurveTo(c1.x,c1.y,end1.x,end1.y);
            ctx.quadraticCurveTo(c2.x,c2.y,start.x,start.y);
            ctx.closePath();
            ctx.fillStyle="rgb(253,238,181)";
            ctx.fill();
        }

        // 内侧叶子
        for(var i=1;i<17;i++){
            var ratio=(i+30)/60;

            var theta=Math.PI/3*4-i*Math.PI/20;
            var start={};
            start.x=radius*Math.cos(theta);
            start.y=radius*Math.sin(theta);

            var end1={};
            end1.x=start.x+ratio*leaveLength*Math.cos(Math.PI/4*3+theta);
            end1.y=start.y+ratio*leaveLength*Math.sin(Math.PI/4*3+theta);

            var center={};
            center.x=(start.x+end1.x)/2;
            center.y=(start.y+end1.y)/2;

            // 利用复数求c1
            var c1={};
            c1.x=center.x+center.y-end1.y;
            c1.y=end1.x-center.x+center.y;

            // 利用复数求c2
            var c2={};
            c2.x=center.x+center.y-start.y;
            c2.y=start.x-center.x+center.y;

            ctx.beginPath();
            ctx.lineTo(start.x,start.y);    
            ctx.quadraticCurveTo(c1.x,c1.y,end1.x,end1.y);
            ctx.quadraticCurveTo(c2.x,c2.y,start.x,start.y);
            ctx.closePath();
            ctx.fillStyle="rgb(253,238,181)";
            ctx.fill();
        } 

        // 作者
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "8px consolas";
        ctx.fillStyle="black";
        ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);
    }

    // 画前景
    this.paintFg=function(ctx){
        
    }
}



//-------------------------------------------------------
// 取得一个齿轮全部控制点的函数
// n:齿轮齿数
// angle:齿斜面倾角
// outerRadius:齿轮外径
// innerRadius:齿轮内径
//-------------------------------------------------------
function getGearArray(n,angle,outerRadius,innerRadius){
    // 准备齿轮数组
    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});
    }

    return gearArr;
}

// 画实心五角星的函数
function draw5Star(ctx,x,y,r,color){
    ctx.save()
    ctx.translate(x-r,y-r);    
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
    ctx.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
    ctx.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
    ctx.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
    ctx.lineTo(r, 0);
    ctx.closePath();
    ctx.fillStyle=color;
    ctx.fill();
    ctx.restore();
}

//--------------------------------------------------
// 函数：创建波浪式环形需要的数组
// n:浪头峰谷个数
// radius：环形半径
// waveHeight：浪高
// 返回：包含浪高中低点坐标的数组
//--------------------------------------------------
function createWaveCircleArray(n,radius,waveHeight){
    var arr=[];

    const LEN=n+2;// 数组长度比浪头峰谷数多两个以在绘图时形成闭环    
    for(var i=0;i<LEN;i++){
        var theta=i*Math.PI*2/n;
        var r=radius+Math.sin(Math.PI/2*i)*waveHeight;// 造成涨落
        var pt={};
        pt.x=r*Math.cos(theta);
        pt.y=r*Math.sin(theta);
        arr.push(pt);
    }

    return arr;
}

/*---------------------------------------------
活着不是靠泪水博得同情，
而是靠汗水赢得掌声。
理性的羊肠小道，胜过鲁莽的高速公路。
----------------------------------------------*/
//-->
</script>

【底图】

以上代码使用到的底图120.jpg

END

普兰店拉马努金
关注
专栏目录
canvas绘制直线、折线、矩形与多边形
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
h5 Canvas矩形的绘制
suwu150
02-26 9715
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一个填充的矩形 strokeRect(x, y, width, height)：绘制一个矩形的边框 clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明 除此之外还可以通过Canvas中Canv...
html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
weixin_34260787的博客
06-05 3673
您可能感兴趣的话题：绘制文字核心提示：如何在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用2D上下文的fillStyle和strokeStyle属性来完成。要在canvas上绘制文字，...
Canvas与Drawable绘制图形
热门推荐
dapangzao的专栏
04-18 1万+
一、图形展示 Android中提供两种方式来绘制图形到view上。 1.将Drawable（包括图片、动画等）绘制到view对象 如图片，图形，动画等，适用于一些实现简单且不需要动态改变的图形，比如动画，shape等。 Drawable是可绘制图形的抽象。其可以定义各种可绘制图形，包括ShapeDrawable、BitmapDrawable等等。当然也可以自定义一些drawable对象。
Canvas绘制地图
qq_40289557的博客
02-22 8963
在我们的大屏可视化项目中，地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多，其中最具有代表性的莫过于使用echarts，引入一个js文件，再加上一些简单的配置，这样一个地图就展示出来了。但是作为一名优秀的前端程序员，对于很多技术，我们既要知其然，也要只其所以然，本章节以HTML5中的Canvas技术为背景，简单讲解一下地图数据可视化实现的一些思路。
canvas用于绘制视频
落枫秋歌
05-14 6155
canvas相关方法介绍 1.ctx.getImageData(sx, sy, sw, sh)：其中sx、sy分别是起点的横纵坐标，sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度；其返回值是一个imageData对象，包含宽度、高度、data（Uint8ClampedArray类型的数组）； 2.ctx.putImageData(imagedata, dx, dy)或者ctx.putIm...
说说如何使用 Canvas 绘制弧线与曲线
读万卷书，行万里路
08-02 4795
绘制弧线前，我们需要先了解角度与弧度的概念。 1 角度与弧度 （1）角度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时，两条射线的夹角的大小为1度 。( 单位 :º ） （2）弧度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。具体计算公式为： rad 即弧度单词 radian 的缩写。 角度转换为弧度，推导与计算公式为： 2 弧线 弧线可以是圆，也可以是圆的
canvas中手动绘制椭圆的方法
weixin_43630073的博客
08-31 3408
canvas中手动绘制椭圆的方法 讲解：canvas手动绘制椭圆是通过两点进行绘制，相当于绘制一个矩形，然后它的内切椭圆（已知起点和终 点）。假设起点为（bx，by）终点为（ex，ey） （ 1）. 2. var axisx = Math.abs((ex- bx)/2); //半轴是自然数，所以加了绝对值 var axisy = Math.abs((ey-by)/2); ...
canvas三种方法绘制矩形（图文示例）
大剑师兰特的GIS世界
11-26 3576
canvas只支持一种原生的图形绘制：`矩形`。所有其他图形都至少需要生成一种路径 (path)。canvast 提供了三种方法绘制矩形。 1、fillRect(x, y, width, height)：绘制一个填充的矩形。 2、strokeRect(x, y, width, height)：绘制一个矩形的边框。 3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
canvas绘制海报分享，海报中设置圆角二维码
a_靖的博客
08-25 2238
canvas绘制海报分享，海报中设置圆角二维码，背景图，动态的文字，绘制完成以后保存为图片，可长按分享海报图片。
【Canvas】再识Canvas--绘制表格
weixin_44707049的博客
12-17 1653
https://www.bilibili.com/video/BV1ss411V7s1?p=3 昨天学了canvas元素的创建、获取及canvas上下文、画线操作、描边操作、闭合路径操作，今天学习一下Canvas设置描边样式还有填充样式。 先看一下代码： <canvas id="demo"></canvas> <script type="text/javascript"> //通过id获取页面中的canvas元素 var canvas = document..
html5canvas下绘制gif,JS+canvas操作gif动图
weixin_42525005的博客
06-20 2201
这次给大家带来JS+canvas操作gif动图，JS+canvas操作gif动图的注意事项有哪些，下面就是实战案例，一起来看一下。HTML5 canvas可以读取图片信息，绘制当前图片。于是可以实现图片马赛克，模糊，色值过滤等很多图片特效。我们这里不用那么复杂，只要读取我们的图片，重绘下就可以。HTML代码：JS代码：if('getContext'indocument.createElement(...
HTML5实现唐朝服饰网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-27 1920
HTML5实现唐朝服饰网站模板源码，大作业，毕业设计，唐装网站，服饰网站，网站源码，介绍唐装的由来，分为网站首页，唐装演变，唐装配色，唐装花纹，唐装文化等页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入唐朝服饰的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
html中视口单位是怎么用
servepeople的博客
10-10 276
vw和vh：用来基于视口的宽度和高度，灵活设置元素的宽高、间距等。vmin和vmax：在不同的屏幕方向（横向或纵向）上，选择视口宽度和高度中较小或较大的值。通过视口单位，你可以让网页的布局和样式更加响应式，适应不同屏幕的大小。这对于需要在手机、平板和桌面设备上展示自适应内容的网页来说非常有用。
Django+Vue考勤系统答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
Django+Vue购物商城系统答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
基于KAN的轴承故障诊断（Python完整源码和数据）
最新发布
10-10
基于KAN的轴承故障诊断（Python完整源码和数据） Pytorch，torch==2.2.2，具体含基于KAN卷积的轴承故障分类。 KAN（Kolmogorov–Arnold Networks）的模型，它对标的是MLPs（多层感知机），这个模型由数学定理Kolmogorov–Arnold启发得出的。该模型最重要的一点就是把激活函数放在了权重上，也就是在权重上应用可学习的激活函数，这些一维激活函数被参数化为样条曲线，从而使得网络能够以一种更灵活、更接近Kolmogorov-Arnold 表示定理的方式来处理和学习输入数据的复杂关系。
高清车牌识别管理系统V9.9-2023-08-09-9.9-安装包
10-10
免狗、面加密
HTML5 canvas入门：绘制图像与矩形框
"HTML5新增了canvas元素，用于在网页上进行动态图形绘制，它可以轻松绘制各种几何形状，如矩形、圆形和三角形。canvas元素的行为类似inline-block元素，但提供了丰富的绘图接口，使得JavaScript可以操控画布进行复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值