【Canvas与艺术】绘制铜质钢底24周年纪念章

最新推荐文章于 2024-07-18 18:43:34 发布
最新推荐文章于 2024-07-18 18:43:34 发布
阅读量902 收藏 13
点赞数 28
分类专栏： 艺术 文章标签： canva可画 html5 24 周年 纪念章
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/138168475
版权

【关键点】

底图的查找和多次尝试、文字描边。

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>使用HTML5/Canvas绘制铜质钢底24周年纪念章</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="myImg1" src="159-1.jpg" style="display:none;"/>
            <img id="myImg2" src="159-2.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){
        //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);// 清屏        
        
        writeText(ctx,WIDTH/2-30,HEIGHT/2-10,"逆火原创","8px consolas","black");// 版权
    }

    // 画前景
    this.paintFg=function(ctx){
        // 外凸圈
        var r=244;
        ctx.save();
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        var lgrd=ctx.createLinearGradient(-r,-r,2*r,2*r);
        lgrd.addColorStop(0,"rgb(255,230,111)");
        lgrd.addColorStop(1,"rgb(0,0,0)");
        ctx.fillStyle=lgrd;
        ctx.fill();

        // 分隔圈
        ctx.save();
        ctx.beginPath();
        ctx.arc(0,0,241,0,Math.PI*2,false);
        ctx.closePath();
        ctx.strokeStyle="rgb(174,143,0)";
        ctx.stroke();

        // 中圈
        ctx.save();
        ctx.rotate(Math.PI*5/4);
        var r=240;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.clip();
        var img=document.getElementById("myImg1");
        ctx.drawImage(img,0,0,300,300,-r,-r,2*r,2*r);
        ctx.restore();

        // 内凹圈
        var r=144;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        var lgrd=ctx.createLinearGradient(-r,-r,2*r,2*r);
        lgrd.addColorStop(0,"rgb(151,124,0)");
        lgrd.addColorStop(1,"rgb(255,230,111)");
        ctx.fillStyle=lgrd;
        ctx.fill();

        // 分隔圈
        ctx.beginPath();
        ctx.arc(0,0,141,0,Math.PI*2,false);
        ctx.closePath();
        ctx.strokeStyle="rgb(65,42,36)"
        ctx.stroke();

        // 内圈
        ctx.save();
        ctx.rotate(1*Math.PI+Math.PI/4);
        var r=140;        
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.clip();
        var img=document.getElementById("myImg2");
        ctx.drawImage(img,50,200,2*r,2*r,-r,-r,2*r,2*r);
        ctx.restore();
        // 加个蒙版
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fillStyle="rgba(25,25,25,0.1)";
        ctx.fill();

        // 上半圈文字
        var words="CELEBRATING";
        var arr=words.split("");
        for(var i=0;i<arr.length;i++){
            var letter=arr[i];
            var theta=i*Math.PI/180*12.5+Math.PI+Math.PI/180*30;
            var r=165;
            var x=r*Math.cos(theta);
            var y=r*Math.sin(theta);

            ctx.save();
            ctx.translate(x,y);
            ctx.rotate(theta+Math.PI/2);
            ctx.scale(1,0.8);
            ctx.textBaseline="bottom";
            ctx.textAlign="center";
            ctx.font = "48px Stencil Std";
            ctx.fillStyle="rgb(67,42,20)";
            ctx.fillText(letter,0,0);
            ctx.strokeStyle="rgb(255,160,66)";
            ctx.strokeText(letter,0,0);
            ctx.restore();
        }

        // 下半圈文字
        var words="aniversary";
        var arr=words.split("");
        for(var i=0;i<arr.length;i++){
            var letter=arr[i];
            var theta=-i*Math.PI/180*12.5+Math.PI-Math.PI/180*36;
            var r=214;
            var x=r*Math.cos(theta);
            var y=r*Math.sin(theta);

            ctx.save();
            ctx.translate(x,y);
            ctx.rotate(theta-Math.PI/2);
            ctx.scale(1,0.8);
            ctx.textBaseline="bottom";
            ctx.textAlign="center";
            ctx.font = "48px Stencil Std";
            ctx.fillStyle="rgb(67,42,20)";
            ctx.fillText(letter,0,0);
            ctx.strokeStyle="rgb(255,160,66)";
            ctx.strokeText(letter,0,0);
            ctx.restore();
        }

        // 两侧五星
        draw5Star(ctx,-189,0,21);
        ctx.fillStyle="rgb(67,42,20)";
        ctx.fill();
        ctx.strokeStyle="rgb(255,160,66)";
        ctx.stroke();

        draw5Star(ctx,189,0,21);
        ctx.fillStyle="rgb(67,42,20)";
        ctx.fill();
        ctx.strokeStyle="rgb(255,160,66)";
        ctx.stroke();

        // 24
        var x=-10,y=55;
        var word="24";
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "96px Stencil Std";
        ctx.fillStyle="rgb(67,42,20)";
        ctx.fillText(word,x,y);
        ctx.strokeStyle="rgb(255,160,66)";
        ctx.strokeText(word,x,y);

        // th
        var x=70,y=-15;
        var word="th";
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "36px consolas";
        ctx.fillStyle="rgb(67,42,20)";
        ctx.fillText(word,x,y);
        ctx.strokeStyle="rgb(255,160,66)";
        ctx.strokeText(word,x,y);

        // 24颗星
        var r=120;
        for(var i=0;i<24;i++){
            var theta=i*Math.PI*2/24;
            var x=r*Math.cos(theta);
            var y=r*Math.sin(theta);

            draw5Star(ctx,x,y,8);
            ctx.fillStyle="rgb(255,215,0)";
            ctx.fill();
        }
    }
}

/*--------------------------------------------------
函数:绘制正五角星的推荐画法
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();
}

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

【底图】

159-1.jpg

159-2.jpg

END

普兰店拉马努金
关注
  • 28
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
weixin_34260787的博客
06-05 3639
您可能感兴趣的话题：绘制文字核心提示：如何在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用2D上下文的fillStyle和strokeStyle属性来完成。要在canvas上绘制文字，...
HTML5 Canvas画板钢笔绘制线条特效.zip
07-11
 padding: 12px 24px;  border-radius: 0;  position: fixed;  left: 50%;  bottom: 24px;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  text-transform: uppercase;  ...
【Canvas与艺术】绘制铜质蓝底五周年(Five Years Anniversary)徽章
一念非凡(46岁待业程序员)
04-05 901
用Html5/Canvas绘制 铜质蓝底五周年(Five Years Anniversary)徽章
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 9595
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一个填充的矩形 strokeRect(x, y, width, height)：绘制一个矩形的边框 clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明 除此之外还可以通过Canvas中Canv...
Canvas绘制地图
qq_40289557的博客
02-22 8649
在我们的大屏可视化项目中，地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多，其中最具有代表性的莫过于使用echarts，引入一个js文件，再加上一些简单的配置，这样一个地图就展示出来了。但是作为一名优秀的前端程序员，对于很多技术，我们既要知其然，也要只其所以然，本章节以HTML5中的Canvas技术为背景，简单讲解一下地图数据可视化实现的一些思路。
Canvas与Drawable绘制图形
dapangzao的专栏
04-18 1万+
一、图形展示 Android中提供两种方式来绘制图形到view上。 1.将Drawable（包括图片、动画等）绘制到view对象 如图片，图形，动画等，适用于一些实现简单且不需要动态改变的图形，比如动画，shape等。 Drawable是可绘制图形的抽象。其可以定义各种可绘制图形，包括ShapeDrawable、BitmapDrawable等等。当然也可以自定义一些drawable对象。
canvas用于绘制视频
落枫秋歌
05-14 6088
canvas相关方法介绍 1.ctx.getImageData(sx, sy, sw, sh)：其中sx、sy分别是起点的横纵坐标，sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度；其返回值是一个imageData对象，包含宽度、高度、data（Uint8ClampedArray类型的数组）； 2.ctx.putImageData(imagedata, dx, dy)或者ctx.putIm...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
说说如何使用 Canvas 绘制弧线与曲线
读万卷书，行万里路
08-02 4454
绘制弧线前，我们需要先了解角度与弧度的概念。 1 角度与弧度 （1）角度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时，两条射线的夹角的大小为1度 。( 单位 :º ） （2）弧度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。具体计算公式为： rad 即弧度单词 radian 的缩写。 角度转换为弧度，推导与计算公式为： 2 弧线 弧线可以是圆，也可以是圆的
html5 canvas绘制艺术彩笔涂鸦动画特效.zip
07-11
代码片段： ...html5 canvas绘制艺术彩笔涂鸦动画特效</title> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body> <canvas id="canvas"></canvas>
Canvas画板钢笔绘制线条特效
06-24
"Canvas画板钢笔绘制线条特效"是一个利用Canvas API实现的交互式功能，用户可以通过模拟钢笔工具在画板上绘制线条，并且能够实现动态的动画效果，比如这里提到的“导火线燃烧动画”。下面我们将详细探讨如何使用...
canvas钢笔绘制线条创建导火线燃烧动画效果.zip
07-11
这个技术主要涉及到JavaScript（JS）编程，尤其是与Canvas元素交互的部分，通过Canvas的绘图方法来模拟真实世界的动态效果。 首先，让我们了解HTML5 Canvas。这是一个基于矢量图形的API，允许开发者在网页上动态...
Canvas画板钢笔绘制线条特效特效代码
03-20
"Canvas画板钢笔绘制线条特效特效代码"是一个利用Canvas API实现的创新性项目，它通过模拟钢笔工具来绘制线条，并且添加了独特的动画效果，如导火线燃烧的视觉表现。这个项目对于提升网页交互性和视觉吸引力有着显著...
HTML5 Input 验证身份证
cuisidong1997的博客
07-14 374
对于验证身份证号码，我们可以使用"type"属性为"text"的input元素，并通过"pattern"属性来指定验证的正则表达式。在许多网站或应用程序中，我们常常需要验证用户输入的身份证号码的有效性。本文将介绍如何使用HTML5的input元素来验证身份证号码，并提供相应的代码示例。通过使用HTML5的input元素和正则表达式，我们可以方便地验证用户输入的身份证号码的有效性。在本文中，我们介绍了身份证号码的正则表达式，并提供了相应的代码示例。身份证号码的格式包括18位和15位两种。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
最新发布
m0_62996549的博客
07-18 99
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
html5——表单
jiuyuexixi的博客
07-10 1332
html5——表单
探索HTML5的设计原则：引领Web开发的未来方向
s8305057的博客
07-09 701
综上所述，HTML5的设计原则体现了对用户体验、内容可访问性、跨平台兼容性以及未来可扩展性的全面考量。这些原则不仅推动了Web技术的不断进步，也为Web开发者提供了更加丰富和强大的工具集。随着HTML5技术的不断成熟和普及，我们有理由相信，Web应用将变得更加智能、高效和人性化，为用户带来前所未有的体验。作为Web开发者，我们应积极拥抱HTML5及其设计原则，不断探索和创新，共同推动Web技术的未来发展。
HTML5.Canvas.基础教程教程.pdf
03-05
HTML5.Canvas.基础教程教程，包含各类图形的绘制Api和代码示例

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值