程序员与你共观世界杯：Javascript 简易绘制世界杯旗帜（含足球元素）

引言：2022年是世界杯赛事年，世界杯是一项非常受全世界欢迎的大赛事，一到世界杯赛事期间，各大平台热搜就一直是世界杯相关的话题，在这期间，即使你不了解足球，也能耳濡目染，因为身边到处都充斥着世界杯元素，各种广告、话题都会围绕着你。对于那些热爱足球的人士来说，肯定想方设法地参加到各种世界杯相关活动中，能让自己更深地融入到世界杯中，虽然不能现场观看或者成为比赛的运动员，但是这样能让他们觉得与世界杯的距离更近了。那么，我们程序员能够做些什么，来拉近与世界杯的距离呢？嘻嘻~~，我的话，则是用代码绘制世界杯元素，来更加融入到世界杯赛事中。

1.构思阶段

  • 思考想要绘制什么样的图案？
  • 图案能不能表达出世界杯相关信息？
  • 图案是不是过于复杂，难以通过技术实现？
  • 构思出简易图案：FIFA 国际球联旗帜，加上足球元素

2. 作出设计图

  • 旗帜很容易绘制，用蓝色矩形代替，在旗帜中间再加上 FIFA 文案即可。
  • 难点在于足球绘制（亦可用足球图标代替，但本人想要有一点点的挑战性，就自己绘制实现），需要先作出足球的设计图，否则大脑很难边写代码边联想出对应图形的绘制数据。
  • 草图如下：（不是精确地设计足球，有个大致样子即可）
    在这里插入图片描述

3.技术实现
由于本人从事的是前端开发，所以这里就通过使用 javascript + canvas 技术来实现图形绘制。

  • 步骤1：创建画布
var canvas = document.createElement('canvas')
canvas.id = "myCanvas"
canvas.width = 480
canvas.height = 250
canvas.style.border = "1px solid #d3d3d3"
document.body.style.textAlign = "center"
document.body.appendChild(canvas)var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
  • 步骤2：绘制旗帜背景
// 绘制渐变矩形（作为旗帜轮廓）
var grd=ctx.createLinearGradient(0,0,800,0);
grd.addColorStop(0,"#438fff");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,480,250);

在这里插入图片描述

  • 步骤3：绘制足球轮廓
// 球形
ctx.beginPath();
ctx.arc(40,40,40,0,2*Math.PI);
ctx.fillStyle="white"; // 用白色填充球形
ctx.fill()
ctx.stroke();

在这里插入图片描述

  • 步骤4：绘制足球内部图案
// 绘制球形中间的大五边型
ctx.beginPath();
ctx.moveTo(40,20); // 起点
ctx.lineTo(20,40);
ctx.lineTo(30,60);
ctx.lineTo(50,60);
ctx.lineTo(60,40);
ctx.closePath();  // 回到起点
ctx.fillStyle = "black";  //颜色
ctx.fill(); //用黑色填充当前绘图（路径）
ctx.stroke(); //绘制已定义的路径// 分别绘制和中间大五边形连接的五个小三角及连接线，填充颜色为黑色
ctx.moveTo(20,40)
ctx.lineTo(8,35)
ctx.stroke()
ctx.beginPath();
ctx.moveTo(4,24)
ctx.lineTo(8,35)
ctx.lineTo(0,40)
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke()ctx.moveTo(40,20)
ctx.lineTo(40,8)
ctx.stroke()
ctx.beginPath();
ctx.moveTo(48,1)
ctx.lineTo(40,8)
ctx.lineTo(32,1)
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke()ctx.moveTo(60,40)
ctx.lineTo(72,35)
ctx.stroke()
ctx.beginPath();
ctx.moveTo(80,40)
ctx.lineTo(72,35)
ctx.lineTo(76,24)
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke()ctx.moveTo(50,60)
ctx.lineTo(58,68)
ctx.stroke()
ctx.beginPath();
ctx.moveTo(54,78)
ctx.lineTo(58,68)
ctx.lineTo(68,68)
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke()ctx.moveTo(30,60)
ctx.lineTo(22,68)
ctx.stroke()
ctx.beginPath();
ctx.moveTo(12,68)
ctx.lineTo(22,68)
ctx.lineTo(28,78)
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke()

在这里插入图片描述

  • 步骤5：绘制旗帜文案
// 绘制文本
var text="FIFA"
ctx.font="80px Arial";
var txtWidth=ctx.measureText(text).width
var x = ~~(c.width-txtWidth)/2-40
ctx.fillStyle="white"
for(let i=0;i<text.length;i++){ctx.fillText(text[i],x+60*i,150);
}

在这里插入图片描述

完整代码（足球元素有缩小和移动处理）：

// 向当前页面中添加画布元素
var canvas = document.createElement('canvas')
canvas.id = "myCanvas"
canvas.width = 480
canvas.height = 250
canvas.style.border = "1px solid #d3d3d3"
document.body.style.textAlign = "center"
document.body.appendChild(canvas)// 获取画布 DOM 元素，对画布操作
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 保存初始绘图状态设置，将保存的设置压入栈中，可通过 restore() 弹出
ctx.save()// 绘制渐变矩形（作为旗帜轮廓）
var grd=ctx.createLinearGradient(0,0,800,0);
grd.addColorStop(0,"#438fff");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,480,250);// 绘图状态设置为画布从(10,10)开始绘制，并且作绘图缩小处理
// 注：这里设置后会对以下所有绘图内容产生影响
ctx.translate(10,10);
ctx.scale(0.6,0.6)// 球形
ctx.beginPath();
ctx.arc(40,40,40,0,2*Math.PI);
ctx.fillStyle="white"; // 用白色填充球形
ctx.fill()
ctx.stroke();// 绘制球形中间的大五边型
ctx.beginPath();
ctx.moveTo(40,20); // 起点
ctx.lineTo(20,40);
ctx.lineTo(30,60);
ctx.lineTo(50,60);
ctx.lineTo(60,40);
ctx.closePath();  // 回到起点
ctx.fillStyle = "black";  //颜色
ctx.fill(); //用黑色填充当前绘图（路径）
ctx.stroke(); //绘制已定义的路径// 分别绘制和中间大五边形连接的五个小三角及连接线，填充颜色为黑色
// 注：这里做了代码优化处理
const pointList = [[{ x: 20, y: 40 },{ x: 8, y: 35 },{ x: 4, y: 24 },{ x: 8, y: 35 },{ x: 0, y: 40 },],[{ x: 40, y: 20 },{ x: 40, y: 8 },{ x: 48, y: 1 },{ x: 40, y: 8 },{ x: 32, y: 1 },],[{ x: 60, y: 40 },{ x: 72, y: 35 },{ x: 80, y: 40 },{ x: 72, y: 35 },{ x: 76, y: 24 },],[{ x: 50, y: 60 },{ x: 58, y: 68 },{ x: 54, y: 78 },{ x: 58, y: 68 },{ x: 68, y: 68 },],[{ x: 30, y: 60 },{ x: 22, y: 68 },{ x: 12, y: 68 },{ x: 22, y: 68 },{ x: 28, y: 78 },],
]
for(let i = 0; i < pointList.length; i++) {ctx.moveTo(pointList[i][0].x,pointList[i][0].y)ctx.lineTo(pointList[i][1].x,pointList[i][1].y)ctx.stroke()ctx.beginPath();ctx.moveTo(pointList[i][2].x,pointList[i][2].y)ctx.lineTo(pointList[i][3].x,pointList[i][3].y)ctx.lineTo(pointList[i][4].x,pointList[i][4].y)ctx.closePath();ctx.fillStyle = "black";ctx.fill();ctx.stroke()
}// 弹出初始绘图状态设置（这里文本不做缩小处理）
ctx.restore()
// 绘制文本
var text="FIFA"
ctx.font="80px Arial";
var txtWidth=ctx.measureText(text).width
var x = ~~(c.width-txtWidth)/2-40
ctx.fillStyle="white"
for(let i=0;i<text.length;i++){ctx.fillText(text[i],x+60*i,150);
}
// 将画布内容转成 base64 格式图片
var imgUrl = c.toDataURL('image/png');// 将绘制的内容呈现到当前页面
document.body.innerHTML = `<img src=${imgUrl}>`![在这里插入图片描述](https://img-blog.csdnimg.cn/5f0d03a76e954e5daf34d082173de0c5.gif)

最终效果图：
在这里插入图片描述

4.代码使用方式

  • 拷贝完整代码
  • 打开任意浏览器（注：不要使用太旧的浏览器，推荐谷歌浏览器）
  • 在任意标签页面下，按下 F12 键打开浏览器控制台，在控制台粘贴代码，然后按下回车键（Enter）
  • 代码将会清空当前页面内容，在当前页面绘制图案
    可见下图动图展示过程：
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/1382578.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

初学RenderMonkey做一面旗帜飘动的效果

初学RenderMonkey做一面旗帜飘动的效果

这几天在捣鼓一个游戏 骑马与砍杀 不知道有没有人玩过。官方出了个shader包&#xff0c;可以自定义shader,于是就开始学起来了&#xff0c;学了一点&#xff0c;简单的实现了一直想弄的动态世界。这期间一直在用RenderMonkey开发&#xff08;貌似停止更新了&#xff0c;会不会有…
阅读更多...
攻防世界ctf题目easyupload做题笔记。

攻防世界ctf题目easyupload做题笔记。

刚刷完upload-labs靶场&#xff0c;做做ctf题目&#xff0c;发现自己掌握的知识并不牢固。做了半天没有解出来&#xff0c;最后还是看别人的题解做出来的。写下做题过程&#xff0c;也就是wp吧。为了方便以后复习巩固。 本题的主要考点为利用fastcgi的.user.ini特性进行任意命…
阅读更多...
我的世界java太卡了怎么办_我的世界服务器太卡怎么办 MC服务器优化攻略

我的世界java太卡了怎么办_我的世界服务器太卡怎么办 MC服务器优化攻略

我的世界很多玩家都有自己的服务器，但是很多玩家并不知道怎么优化和维护服务器，从而导致服务器很卡，今天小编为大家带来的是我的世界服务器优化攻略，还不知道怎么优化服务器的小伙伴不要错过哦。 系统的选择 (网页后台可以跳过本段)关于系统的选择，Linux类系统(Centos、Re…
阅读更多...
我的世界1.14刷雪机java版_我的世界全自动刷雪机图文攻略 手把手教你刷雪机怎么做...

我的世界1.14刷雪机java版_我的世界全自动刷雪机图文攻略 手把手教你刷雪机怎么做...

&#xff1a;原标题&#xff1a; 我的世界刷雪机怎么做?我的世界全自动刷雪机做法是什么?想必对于各位初入我的世界的小伙伴来说有些困难&#xff0c;接下来我们一起来看看我的世界全自动刷雪机做法吧。 【需要的材料提前准备】 橡木楼梯、南瓜、雪块、橙色羊毛、红石中继器、…
阅读更多...
我的世界显示java过老_你在《我的世界》中做过哪些蠢事？玩家：误把“java”看成了jave...

我的世界显示java过老_你在《我的世界》中做过哪些蠢事？玩家：误把“java”看成了jave...

本期内容 玩到现在&#xff0c;我们在Minecraft中获得了很多的乐趣&#xff0c;并将其作为一种信仰来对待&#xff0c;只要有人对这款游戏做了人神共愤的事&#xff0c;便会群起而攻之。不过在一开始的探索过程中&#xff0c;我们或多或少做过一些“蠢事”&#xff0c;其中有些…
阅读更多...
我的世界java版本试玩_我的世界Minecraft Java版17w49a发布

我的世界java版本试玩_我的世界Minecraft Java版17w49a发布

我的世界Minecraft Java版17w49a发。每周快照是Minecraft的测试机制&#xff0c;主要用于下一个正式版的特性预览。然而&#xff0c;每周快照主要用于新特性展示&#xff0c;通常存在大量漏洞。因此对于普通玩家建议仅做测试尝鲜用。使用测试版打开存档前请务必备份。适用于正式…
阅读更多...
我的世界java刷雪机_我的世界全自动刷雪机图文攻略

我的世界java刷雪机_我的世界全自动刷雪机图文攻略

我的世界刷雪机怎么做?我的世界全自动刷雪机做法是什么?想必对于各位初入我的世界的小伙伴来说有些困难&#xff0c;接下来我们一起来看看我的世界全自动刷雪机做法吧。 【需要的材料提前准备】 橡木楼梯、南瓜、雪块、橙色羊毛、红石中继器、拉杆、活塞、箱子、橡木木板、漏…
阅读更多...
JAVA爬酷狗音乐

JAVA爬酷狗音乐

先说一下爬取的思路 1&#xff0c;随便打开一首能波的歌播放&#xff0c;找到它的播放地址&#xff1a; https://wwwapi.kugou.com/yy/index.php?rplay/getdata&hash42447823290E80FD5318E8A195A169DD&album_id28687022 多播放几首发现只要hash和album_id不同就能播放…
阅读更多...
python爬虫：爬取酷狗音乐榜单中的音乐信息并存储到MySQL（附源码）

python爬虫：爬取酷狗音乐榜单中的音乐信息并存储到MySQL（附源码）

目录 具体思路代码部分获取歌曲名称和歌手获取歌曲播放页的url获取音乐下载地址将获取到的音乐信息添加到MySQL中 完整代码 获取酷狗音乐榜单中的音乐信息&#xff0c;这里我以“网络红歌榜”为例 获取榜单中的 “音乐名称”&#xff0c;“歌手”&#xff0c;“音乐下载地址”&…
阅读更多...
KeePass CVE-2023-32784：进程内存转储检测

KeePass CVE-2023-32784：进程内存转储检测

KeePass CVE-2023-32784&#xff1a;进程内存转储检测 KeePass 是一种流行的开源密码管理器&#xff0c;可以在 Windows、Mac 或 Linux 上运行。该漏洞允许从正在运行的进程的内存中以明文形式提取主密钥。主密钥将允许攻击者访问所有存储的凭据 强烈建议更新到KeePass 2.54以…
阅读更多...
Python爬虫之爬取酷狗音乐歌曲

Python爬虫之爬取酷狗音乐歌曲

Python爬虫之爬取酷狗音乐歌曲 1.安装第三方库 在Python的语言库中, 分为Python标准库和Python的第三方库. Python标准库是在你安装Python的时候已经包含在了安装目录下, 而Python第三方库需要使用Python的包管理pip来安装. 在本次代码中, 我们需要用到request库. requests翻…
阅读更多...
（统计学习方法|李航）第四章 朴素贝叶斯算法——贝叶斯估计

（统计学习方法|李航）第四章 朴素贝叶斯算法——贝叶斯估计

贝叶斯估计方法&#xff1a; 计算男女时只有两个值&#xff0c;所以K2 贝叶斯估计就是拉普拉斯平滑 估计方法&#xff1a;为什么叫做贝叶斯估计呢&#xff1f; 例题&#xff1a; 重新回顾以下朴素贝叶斯&#xff1a; 对他求导&#xff0c;求出最大值 得到了色i他的估计值&…
阅读更多...
数据归一化：优化数据处理的必备技巧

数据归一化：优化数据处理的必备技巧

文章目录 &#x1f340;引言&#x1f340;数据归一化的概念&#x1f340;数据归一化的应用&#x1f340;数据归一化的注意事项与实践建议&#x1f340;代码演示&#x1f340;在sklearn中使用归一化&#x1f340;结语 &#x1f340;引言 在当今数据驱动的时代&#xff0c;数据的…
阅读更多...
制造业为什么要建设数字化供应链

制造业为什么要建设数字化供应链

数字化让越来越多的人走向了线上的世界&#xff0c;让那些拥有线上产品或提供线上服务的企业提供了更多流量。 但与此同时&#xff0c;传统制造业遭受了沉重的打击&#xff0c;考虑到防疫要求&#xff0c;很多工厂长期处于人手不足的状态&#xff0c;生产制造效率大幅降低&…
阅读更多...
架构设计第八讲：架构 - 理解架构的模式2 (重点)

架构设计第八讲：架构 - 理解架构的模式2 (重点)

架构设计第八讲&#xff1a;架构 - 理解架构的模式2 (重点) 本文是架构设计第8讲&#xff1a;架构 - 理解架构的模式2&#xff0c;整理自朱晔的互联网架构实践心得, 他是结合了 微软给出的云架构的一些模式的基础上加入他自己的理解来总结互联网架构中具体的一些模式。我在此基…
阅读更多...
设计师常用的几个资源网站，你都知道吗？

设计师常用的几个资源网站，你都知道吗？

如果你是一名设计师&#xff0c;你的电脑上可能存储了很多的设计网站&#xff0c;但是碎玉一些新手小白来说&#xff0c;刚接触设计的时候应该怎样进行绘制呢&#xff1f;难道要自己去一笔一笔的进行绘制吗&#xff1f;下面给大家分享几个设计网站&#xff0c;一起来看看吧&…
阅读更多...
设计师常用的几个资源网站分享，再也不用为没有素材发愁

设计师常用的几个资源网站分享，再也不用为没有素材发愁

如果你是一名设计师&#xff0c;你的电脑上可能存储了很多的设计网站&#xff0c;但是碎玉一些新手小白来说&#xff0c;刚接触设计的时候应该怎样进行绘制呢&#xff1f;难道要自己去一笔一笔的进行绘制吗&#xff1f;下面给大家分享几个设计网站&#xff0c;一起来看看吧&…
阅读更多...
设计师常用的几个资源网站，你都知道几个呢？

设计师常用的几个资源网站，你都知道几个呢？

如果你是一名设计师&#xff0c;你的电脑上可能存储了很多的设计网站&#xff0c;但是碎玉一些新手小白来说&#xff0c;刚接触设计的时候应该怎样进行绘制呢&#xff1f;难道要自己去一笔一笔的进行绘制吗&#xff1f;下面给大家分享几个设计网站&#xff0c;一起来看看吧&…
阅读更多...
Windows下在线图片处理工具

Windows下在线图片处理工具

图片处理工具Photopea Photopea是一个在线版的图片编辑器, 与Photoshop的界面非常相似, 经常被人们误以为是Photoshop的在线网页版, Photopea可以满足绝大多数图片修改需求, 更有趣的是, Photopea支持打开Sketch格式,对经常与Sketch打交道的设计师, 非常有诱惑力! 更多介绍 &…
阅读更多...
这些开发好工具，你知道几个？

这些开发好工具，你知道几个？

文章目录 这些超级好的软件&#xff0c;你知道吗&#xff1f;&#xff01;文档类Microsoft OfficeWPS OfficeTyporanotepadsublime Text3或2 工具类截图工具&#xff1a;snipaste虚拟机&#xff1a;Oracle VM VirtualBox笔记类&#xff1a;Microsoft OneNote在线大纲&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023