【Canvas与艺术】绘制铜质蓝底五周年(Five Years Anniversary)徽章

本文主要是介绍【Canvas与艺术】绘制铜质蓝底五周年(Five Years Anniversary)徽章,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【关键点】

利用二次贝塞尔曲线生成环形波纹轮廓。

【成果图】

【代码】

<!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="512px" height="512px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas><img id="myImg" src="116-1.jpg" style="display:none;"/><img id="myImg2" src="116-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){window.requestAnimationFrame(animate);   }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){}// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    // 外部铜圈var arr=createWaveCircleArray(72,241,10);ctx.beginPath();for(var i=0;i<arr.length-2;i+=2){var pt1=arr[i];var pt2=arr[i+1];// 控制点var pt3=arr[i+2];            ctx.lineTo(pt1.x,pt1.y);ctx.quadraticCurveTo(pt2.x,pt2.y,pt3.x,pt3.y);}ctx.closePath();ctx.lineWidth=3;ctx.strokeStyle="rgb(111,92,62)";ctx.stroke();// 铜质波纹形外圈ctx.save();arr=createWaveCircleArray(72,240,10);ctx.beginPath();for(var i=0;i<arr.length-2;i+=2){var pt1=arr[i];var pt2=arr[i+1];// 控制点var pt3=arr[i+2];            ctx.lineTo(pt1.x,pt1.y);ctx.quadraticCurveTo(pt2.x,pt2.y,pt3.x,pt3.y);}ctx.closePath();ctx.clip();        var img=document.getElementById("myImg");ctx.drawImage(img,0,83,500,500,-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();// 分隔铜圈arr=createWaveCircleArray(72,220,10);ctx.beginPath();for(var i=0;i<arr.length-2;i+=2){var pt1=arr[i];var pt2=arr[i+1];// 控制点var pt3=arr[i+2];            ctx.lineTo(pt1.x,pt1.y);ctx.quadraticCurveTo(pt2.x,pt2.y,pt3.x,pt3.y);}ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(239,194,132)";ctx.stroke();// 内部蓝盘ctx.save();arr=createWaveCircleArray(72,218,10);ctx.beginPath();for(var i=0;i<arr.length-2;i+=2){var pt1=arr[i];var pt2=arr[i+1];// 控制点var pt3=arr[i+2];            ctx.lineTo(pt1.x,pt1.y);ctx.quadraticCurveTo(pt2.x,pt2.y,pt3.x,pt3.y);}ctx.closePath();ctx.clip();        var img=document.getElementById("myImg2");ctx.drawImage(img,0,0,500,500,-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();// 上方绕圈文字var arr=["W","I","S","H"," ","Y","O","U"," ","V","E","R","Y"," ","H","A","P","P","Y"];for(var i=0;i<arr.length;i++){var letter=arr[i];var theta=i*Math.PI/180*10+Math.PI+Math.PI/180*2;var x=180*Math.cos(theta);var y=180*Math.sin(theta);ctx.save();ctx.translate(x,y);ctx.rotate(theta+Math.PI/2);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "20px Governor Shadow";ctx.fillStyle="rgb(255,237,177)";ctx.fillText(letter,0,0);ctx.restore();}// CELEBRATINGctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "24px Bahnschrift SemiBold Condensed";ctx.fillStyle="rgb(255,237,177)";ctx.fillText("CELEBRATING",0,-115);// Big Fivectx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "240px Arial";ctx.fillStyle="rgb(255,225,83)";ctx.fillText("5",0,123);// yearsctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "40px Arial";ctx.fillStyle="white";ctx.fillText("years",80,70);// ANNIVERSARYctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "36px 微软雅黑";ctx.fillStyle="rgb(255,237,177)";ctx.fillText("ANNIVERSARY",0,130);// ---★---ctx.beginPath();ctx.moveTo(-90,150);ctx.lineTo(-18,150);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgb(255,237,177)";ctx.stroke();        draw5Star(ctx,0,150,14,"rgb(255,237,177)");ctx.beginPath();ctx.moveTo(90,150);ctx.lineTo(18,150);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgb(255,237,177)";ctx.stroke();// congratulationsctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "24px Calibri";ctx.fillStyle="rgb(255,237,177)";ctx.fillText("congratulations",0,195);// 作者ctx.font = "8px consolas";ctx.fillStyle="black";ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){}
}//--------------------------------------------------
// 函数:创建波浪式环形需要的数组
// 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;
}// 画实心五角星的函数
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();
}/*---------------------------------------------
每个人都会有迷茫的时期,
也曾一度过着混吃等死的日子,
以至于忘了自己曾经的梦想,
甚至从头再来的勇气也渐渐消失,
但实际上,
每个人的勇气从来都不会主动消失,
它会随着你的多一份努力而强势上线,
最终帮助你找到真正的自己。
----------------------------------------------*/
//-->
</script>

【底图】

116-1.jpg

116-2.jpg

END

这篇关于【Canvas与艺术】绘制铜质蓝底五周年(Five Years Anniversary)徽章的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/878584

相关文章

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

利用matlab bar函数绘制较为复杂的柱状图,并在图中进行适当标注

示例代码和结果如下:小疑问:如何自动选择合适的坐标位置对柱状图的数值大小进行标注?😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87

跟我一起玩《linux内核设计的艺术》第1章(四)——from setup.s to head.s,这回一定让main滚出来!(已解封)

看到书上1.3的大标题,以为马上就要见着main了,其实啊,还早着呢,光看setup.s和head.s的代码量就知道,跟bootsect.s没有可比性,真多……这确实需要包括我在内的大家多一些耐心,相信见着main后,大家的信心和干劲会上一个台阶,加油! 既然上篇已经玩转gdb,接下来的讲解肯定是边调试边分析书上的内容,纯理论讲解其实我并不在行。 setup.s: 目标:争取把setup.

YOLOv8/v10+DeepSORT多目标车辆跟踪(车辆检测/跟踪/车辆计数/测速/禁停区域/绘制进出线/绘制禁停区域/车道车辆统计)

01:YOLOv8 + DeepSort 车辆跟踪 该项目利用YOLOv8作为目标检测模型,DeepSort用于多目标跟踪。YOLOv8负责从视频帧中检测出车辆的位置,而DeepSort则负责关联这些检测结果,从而实现车辆的持续跟踪。这种组合使得系统能够在视频流中准确地识别并跟随特定车辆。 02:YOLOv8 + DeepSort 车辆跟踪 + 任意绘制进出线 在此基础上增加了用户

[情商-13]:语言的艺术:何为真实和真相,所谓真相,就是别人想让你知道的真相!洞察谎言与真相!

目录 前言: 一、说话的真实程度分级 二、说谎动机分级:善意谎言、中性谎言、恶意谎言 三、小心:所谓真相:只说对自己有利的真相 四、小心:所谓真相:就是别人想让你知道的真相 五、小心:所谓善解人意:就是别人只说你想要听到的话 前言: 何为真实和真相,所谓真相,就是别人想让你知道的真相!洞察谎言与真相! 人与人交流话语中,处处充满了不真实,完全真实的只是其中一小部分,这

使用matplotlib绘制散点图、柱状图和饼状图-学习篇

一、散点图 Python代码如下: num_points = 100x = np.random.rand(num_points) #x点位随机y = np.random.rand(num_points) #y点位随机colors = np.random.rand(num_points) #颜色随机sizes = 1000 * np.random.rand(num_points) # 大

黑神话:悟空》增加草地绘制距离MOD使游戏场景看起来更加广阔与自然,增强了游戏的沉浸式体验

《黑神话:悟空》增加草地绘制距离MOD为玩家提供了一种全新的视觉体验,通过扩展游戏中草地的绘制距离,增加了场景的深度和真实感。该MOD通过增加草地的绘制距离,使游戏场景看起来更加广阔与自然,增强了游戏的沉浸式体验。 增加草地绘制距离MOD安装 1、在%userprofile%AppDataLocalb1SavedConfigWindows目录下找到Engine.ini文件。 2、使用记事本编辑

写给大数据开发:你真的“慢“了吗?揭秘技术与职场的平衡艺术

你是否曾经在深夜里,面对着一个棘手的数据处理问题,感到无比沮丧?或者在一次重要的项目汇报中,突然语塞,无法清晰地表达你的技术方案?作为一名大数据开发者,这些场景可能再熟悉不过。但别担心,因为你并不孤单。让我们一起探讨如何在这个瞬息万变的行业中,既磨练技术利刃,又培养职场软实力。 目录 技术与时间的赛跑1. 长远视角的重要性2. 复利效应在技能学习中的应用 跨界思维:数据结构教我们的职场智

Vue 中实现视频播放的艺术

随着前端技术的飞速发展,视频播放在 Web 应用中已经成为了一个不可或缺的功能。从社交媒体平台到教育网站,再到在线购物平台,视频元素无处不在。而 Vue.js 作为当今最流行的前端框架之一,在实现视频播放时提供了很多强大的工具和技巧。在这篇博客中,我们将深入探讨如何使用 Vue.js 实现视频播放功能,不仅仅是简单地嵌入视频,还要添加一些高级功能,如自定义播放器控件、播放进度条、视频切换、事件处理