【Canvas与艺术】绘制磨砂黄铜材质Premium Quality徽章

【关键点】

渐变色的使用、斜纹的实现、底图的寻觅

【成果图】

​​​​​​​

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>磨砂黄铜材质Premium Quality徽章</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body onload="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas><img id="myImg" src="124.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 lgrd=ctx.createLinearGradient(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);lgrd.addColorStop(0,"rgba(168,159,154,0.8)");lgrd.addColorStop(0.28,"rgba(7,12,41,0.8)");lgrd.addColorStop(1,"rgba(7,12,41,0.8)");ctx.fillStyle=lgrd;ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 斜向条纹ctx.save();ctx.rotate(Math.PI/6);for(var i=0;i<100;i++){var y=-HEIGHT+i*10;ctx.beginPath();// 不加此句线条粗劣ctx.moveTo(-WIDTH,y);ctx.lineTo(WIDTH,y);ctx.lineWidth=0.2;var lgrd=ctx.createLinearGradient(-WIDTH,y,WIDTH,y);lgrd.addColorStop(0,"rgb(250,250,250)");lgrd.addColorStop(1,"rgb(7,12,41)");ctx.strokeStyle=lgrd;ctx.stroke();}ctx.restore();// 外缘var arr=createWaveCircleArray(48,141,12);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.strokeStyle="rgb(231,170,79)";ctx.stroke();// 铜底图ctx.save();var arr=createWaveCircleArray(48,140,12);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.clip();var img=document.getElementById("myImg");ctx.drawImage(img,0,0,320,320,-160,-160,320,320);ctx.restore();// 暗圈ctx.beginPath();ctx.arc(0,0,122,0,Math.PI*2,true);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgb(229,174,94)";ctx.stroke();// 蓝圈ctx.beginPath();ctx.arc(0,0,120,0,Math.PI*2,true);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="rgb(19,28,57)";ctx.stroke();// 亮圈ctx.beginPath();ctx.arc(0,0,118,0,Math.PI*2,true);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgb(231,170,79)";ctx.stroke();// 上半圈文字var words="PREMIUM QUALITY";var arr=words.split("");for(var i=0;i<arr.length;i++){var letter=arr[i];var theta=i*Math.PI/180*8.5+Math.PI+Math.PI/180*34;var x=84*Math.cos(theta);var y=84*Math.sin(theta);ctx.save();ctx.translate(x,y);ctx.rotate(theta+Math.PI/2);ctx.scale(1,1.2);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "20px Stencil Std";ctx.fillStyle="rgb(19,28,57)";ctx.fillText(letter,0,0);ctx.restore();}// 下半圈文字var words="PREMIUM QUALITY";var arr=words.split("");for(var i=0;i<arr.length;i++){var letter=arr[i];var theta=-i*Math.PI/180*8.5+Math.PI-Math.PI/180*28;var x=113*Math.cos(theta);var y=113*Math.sin(theta);ctx.save();ctx.translate(x,y);ctx.rotate(theta-Math.PI/2);ctx.scale(1,1.2);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "20px Stencil Std";ctx.fillStyle="rgb(19,28,57)";ctx.fillText(letter,0,0);ctx.restore();}draw5Star(ctx,-100,0,13,"rgb(19,28,57)");draw5Star(ctx, 100,0,13,"rgb(19,28,57)");// 蓝圈ctx.beginPath();ctx.arc(0,0,80,0,Math.PI*2,true);ctx.closePath();ctx.lineWidth=1;ctx.strokeStyle="rgb(19,28,57)";ctx.stroke();// 亮圈ctx.beginPath();ctx.arc(0,0,80.5,0,Math.PI*2,true);ctx.closePath();ctx.lineWidth=0.5;ctx.strokeStyle="rgb(231,170,79)";ctx.stroke();// 中心文字ctx.textBaseline="bottom";ctx.textAlign="center";		ctx.fillStyle="rgb(19,28,57)";	ctx.font = "36px Ink Free";// 手写字体ctx.fillText("BEST",0,-10);// 加两根俏皮的横线ctx.beginPath();ctx.moveTo(-40,-10);ctx.lineTo(40,-15);ctx.lineWidth=0.8;ctx.strokeStyle="rgb(19,28,57)";ctx.stroke();ctx.beginPath();ctx.moveTo(-32,-8);ctx.lineTo(38,-11);ctx.lineWidth=0.5;ctx.strokeStyle="rgb(19,28,57)";ctx.stroke();// 正规字体ctx.font = "36px Bahnschrift SemiBold";ctx.fillText("CHOICE",0,40);// 作者ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "8px consolas";ctx.fillStyle="white";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>

【底图】

上文用到的底图 124.jpg

END

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ PTA 天梯赛 L1-003 个位数统计 L1-005 考试座位号 【范围for循环】【. 与 -> 访问成员】

L1-003 个位数统计 最后一个测试点考察的是当N特别大时&#xff0c;如果用整数存会数据溢出&#xff0c;改成字符串可以增大范围 知识点&#xff1a; 1.范围 for 循环&#xff0c;它对于遍历容器&#xff08;比如字符串&#xff09;中的元素非常方便。在这里&#xff0c;N 是…

TinyEMU源码分析之中断处理

TinyEMU源码分析之中断处理 1 触发中断2 查询中断2.1 查询中断使能与pending状态&#xff08;mie和mip&#xff09;2.2 查询中断总开关与委托&#xff08;mstatus和mideleg&#xff09;2.2.1 M模式2.2.2 S模式2.2.3 U模式 3 处理中断3.1 获取中断编号3.2 检查委托3.3 进入中断3…

⑤-1 学习PID--什么是PID

​ PID 算法可以用于温度控制、水位控制、飞行姿态控制等领域。后面我们通过PID 控制电机进行说明。 自动控制系统 在直流有刷电机的基础驱动中&#xff0c;如果电机负载不变&#xff0c;我们只要设置固定的占空比&#xff08;电压&#xff09;&#xff0c;电机的速度就会稳定在…

HTML5 新增语义标签及属性

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 ✍HTML5 新增语义标签及属性&#x1f48e;1 HTML5 新增的块级语义化标签&…

使用ADO.NET访问数据库

目录 访问数据库的步骤 &#xff11;、建立数据库 &#xff12;、设置链接参数 &#xff08;1&#xff09;web网页和数据库连接的方法一 &#xff08;2&#xff09;web网页和数据库连接的方法二 &#xff13;、建立链接对象 &#xff14;、显示数据库 &#xff15;、数…

openwrt局域网配置多个IP

在局域网配置过程中&#xff0c;若是DHCP服务器关闭&#xff0c;又忘记了配置的ip&#xff0c;将很难访问到路由器重新进行配置。这种情况可以在路由器出厂时做一个备用ip去避免。 1.配置 以下是备用ip的配置方法&#xff0c;以SKYLAB的SKW99 WIFI模组为例进行说明&#xff1…

Android使用shape属性绘制边框内渐变色

目录 先上效果图实现方法shape属性介绍代码结果 先上效果图 这是使用AndroidStudio绘制的带有渐变色的边框背景色 实现方法 项目中由于UI设计需求&#xff0c;需要给按钮、控件设置带有背景色效果的。以下是UI效果图。 这里我们使用shape属性来绘制背景效果。 shape属性介…

ffmpeg命令与批处理编程

(一) CMD脚本查找所有文件 powershell与cmd转换 powershell与cmd虽然同为windows命令&#xff0c;但许多命令并不通用。 CMD换行符 a 在CMD下&#xff0c;可以用^作为换行符&#xff0c;类似于Linux下的\。举例如下&#xff1a; start pemu.exe ^ -net nic,vlan1,macaddr…

最新版IntelliJ IDEA 2024.1安装和配置教程 详细图文解说版安装教程

IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版 文章目录 IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版前言 第一步&#xff1a; IntelliJ IDEA 2024.1安装教程第 0 步&…

如何通过Linux pciehp sysfs接口控制PCIe Slot电源状态?-2

NVME SSD电源状态判断 通过pciehp sysfs接口对NVMe SSD所在的PCIe插槽进行Power On/Off操作时&#xff0c;确实会间接影响到NVMe SSD本身的电源状态。因为NVMe SSD是作为PCIe设备连接到特定插槽上的&#xff0c;插槽电源状态的变化通常会直接影响到与其相连的设备。 当对PCIe…

Python学习笔记16 - 函数

函数的创建和调用 函数调用的参数传递 函数的返回值 函数的参数定义 变量的作用域 递归函数 斐波那契数列 总结

fiddler常用操作汇总

1、过滤 2、查看数据包内容 3、弱网测试 弱网测试其实就是提前设置好一个值&#xff0c;在这个环境下进行测试就行了。 &#xff08;1&#xff09;进入定制规则页面&#xff1a; (2) 点击CtrlF调起搜索&#xff0c;在Find what 中输入300进行查找&#xff0c;更改上行、下行网…

【Java】SpringBoot快速整合mongoDB

目录 1.什么是mongoDB&#xff1f; 2.Docker安装mongoDB 3.SpringBoot整合mongoDB步骤 4.验证 1.什么是mongoDB&#xff1f; MongoDB是一种非关系型数据库&#xff0c;被广泛用于大型数据存储和分布式系统的构建。MongoDB支持的数据模型比传统的关系型数据库更加灵活&#x…

UDTF函数 explode

场景&#xff1a; 原hive数据形式 split 处理到一个Array 形式 使用explode炸开后的效果是 explode结合侧面视图达到targeType 目标形式&#xff1a; 一进多出 explode 将hive 中复杂的 array 炸成多行 因为炸开后&#xff0c; movie 列值少于categoryname 列所以这里为了达到…

SpringBoot的旅游管理系统+论文+ppt+免费远程调试

项目介绍: 基于SpringBoot旅游网站 旅游管理系统 本旅游管理系统采用的数据库是Mysql&#xff0c;使用SpringBoot框架开发。在设计过程中&#xff0c;充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 &#xff08;1&…

《TinyLlama: An Open-Source Small Language Model》全文翻译

【Title】 TinyLlama&#xff1a;开源小语言模型 【Abstract】 我们推出了 TinyLlama&#xff0c;这是一个紧凑的 1.1B 语言模型&#xff0c;在大约 1 万亿个令牌上进行了大约 3 个时期的预训练。 TinyLlama 基于 Llama 2&#xff08;Touvron 等人&#xff0c;2023b&#xff…

【攻防世界】Confusion1

php的标志是大象&#xff0c;Python的标志是蛇 。Python 的 Flask 框架( Flask 使用 Jinja2 作为模板引擎 ) 点进register.php 输入{{3*4}} 输入 {{config}} 也有回显&#xff0c;ssti 判断是否存在ssti注入&#xff1a; 1. {{8*8}} 2. {{config}} 过滤了关键字&#xff0…

动态规划|63.不同路径II

力扣题目链接 class Solution { public:int uniquePathsWithObstacles(vector<vector<int>>& obstacleGrid) {int m obstacleGrid.size();int n obstacleGrid[0].size();if (obstacleGrid[m - 1][n -1] 1 || obstacleGrid[0][0] 1) return 0;vector<ve…

Pygame经典游戏:贪吃蛇

------------★Pygame系列教程★------------ Pygame经典游戏&#xff1a;贪吃蛇 Pygame教程01&#xff1a;初识pygame游戏模块 Pygame教程02&#xff1a;图片的加载缩放旋转显示操作 Pygame教程03&#xff1a;文本显示字体加载transform方法 Pygame教程04&#xff1a;dra…

CameraCtrl、EDTalk、Sketch3D、Diffusion^2、FashionEngine

本文首发于公众号&#xff1a;机器感知 CameraCtrl、EDTalk、Sketch3D、Diffusion^2、FashionEngine NVINS: Robust Visual Inertial Navigation Fused with NeRF-augmented Camera Pose Regressor and Uncertainty Quantification In recent years, Neural Radiance Fields …