【Canvas与艺术】绘制黑白山间野营Camping徽章

【说明】

中间的山月图是借用的网上的成图,不是用Canvas绘制的。

【成果图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>使用Html5/Canvas绘制黑白山间野营Camping徽章</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="145.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);// 清屏		// 外黑圈ctx.beginPath();ctx.arc(0,0,240,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=12;ctx.strokeStyle="black";ctx.stroke();// 绳纹var arr=[];for(var i=0;i<360;i++){var theta=i*Math.PI*2/360;arr.push(theta);}const offset=3;var r=240-offset,R=240+offset;for(var i=0;i<arr.length;i+=4){var start=arr[i];var end=arr[(i+2)%arr.length];var bias=Math.PI*2/360*2.5;var a=createPt(r*Math.cos(start),r*Math.sin(start));var b=createPt(R*Math.cos(end),R*Math.sin(end));var c=createPt(R*Math.cos(end+bias),R*Math.sin(end+bias));var d=createPt(r*Math.cos(start+bias),r*Math.sin(start+bias));ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.arcTo(b.x,b.y,c.x,c.y,40);ctx.arcTo(d.x,d.y,a.x,a.y,40);ctx.closePath();ctx.fillStyle="white";ctx.fill();}// 内黑圈ctx.beginPath();ctx.arc(0,0,230,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=2;ctx.strokeStyle="black";ctx.stroke();ctx.fillStyle="white";ctx.fill();// 上半圈文字var words="GO CAMPING";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*50;var x=190*Math.cos(theta);var y=190*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 = "24px Stencil Std";ctx.fillStyle="rgb(19,28,57)";ctx.fillText(letter,0,0);ctx.restore();}// 下半圈文字var words="in the mountains";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*26;var x=225*Math.cos(theta);var y=225*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 = "24px Stencil Std";ctx.fillStyle="rgb(19,28,57)";ctx.fillText(letter,0,0);ctx.restore();}// 两侧五星draw5Star(ctx,206,0,10);ctx.fillStyle="rgb(19,28,57)";ctx.fill();draw5Star(ctx,-206,0,10);ctx.fillStyle="rgb(19,28,57)";ctx.fill();// 内小点圈ctx.beginPath();ctx.arc(0,0,180,0,Math.PI*2,false);ctx.closePath();ctx.lineWidth=6;ctx.strokeStyle="black";ctx.stroke();for(var i=0;i<180;i++){var theta=Math.PI*2/180*i;var x=180*Math.cos(theta);var y=180*Math.sin(theta);ctx.beginPath();ctx.arc(x,y,2,0,Math.PI*2,false);ctx.closePath();ctx.fillStyle="white";ctx.fill();}// 画ctx.save();ctx.beginPath();ctx.arc(0,0,177,0,Math.PI*2,false);ctx.closePath();ctx.clip();var img=document.getElementById("myImg");ctx.drawImage(img,0,0,500,350,-250,-175,500,350);ctx.restore();// 版权ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "8px consolas";ctx.fillStyle="black";ctx.fillText("逆火原创",WIDTH/2-30,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){}
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*--------------------------------------------------
函数:绘制正五角星的推荐画法
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();
}/*---------------------------------------------
读诗使人灵秀,
然而诗歌的作用远不止于此,
它还能令人茅塞顿开,使人恍然大我。
生活中的曲折与困顿,
古人在遥远的几千年前就已传授了解决之道:
冬天不会持续寒冷,春天总会到来。
----------------------------------------------*/
//-->
</script>

【借用的底图】

【原图】

END

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

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

相关文章

Ocr识别

https://blog.csdn.net/qq_47571357/article/details/132017514 Tesserocr 的安装 https://cuiqingcai.com/31102.html https://digi.bib.uni-mannheim.de/tesseract/ https://zhuanlan.zhihu.com/p/642903270 https://segmentfault.com/a/1190000039929696

fdisk使用的MBR分区

MBR和GPT分区 MBR分区 MBR分区一般在分区的时候 &#xff0c;MBR分区格式只能支持2TB以下的硬盘容量。 分区最多为4个主分区 或 3个主分区和1个扩展分区&#xff0c;而创建扩展分区后可以分无数个逻辑分区&#xff0c;当然跟磁盘容量有关&#xff0c; 逻辑分区在扩展分区上…

Windows 下 bat 脚本调用 Git bash 环境 sh 脚本

1、先找到 Git 安装目录 D:\Install\Git 2、Git bash 编写 sh 脚本 start.sh脚本 3、编写 start.bat脚本 echo offcd /d %~dp0 "D:\Install\Git\bin\sh.exe" --login -i -c "./test/start.sh"pause4、执行 bat 脚本 双击 start.bat 我们下期见&#xf…

运算符介绍

运算符介绍 运算符是一种特殊的符号&#xff0c; 用以表示数据的运算、 赋值和比较等。 算术运算符赋值运算符关系运算符 [比较运算符]逻辑运算符位运算符 [需要二进制基础]三元运算符 算术运算符 算术运算符是对数值类型的变量进行运算的&#xff0c; 在 Java 程序中使用的…

Meta Llama 3 简介

文章目录 要点我们对 Llama 3 的目标最先进的性能模型架构训练数据扩大预训练规模指令微调与 Llama 3 一起建造系统级责任方法大规模部署 Llama 3Llama 3 的下一步是什么&#xff1f;立即尝试 Meta Llama 3 本文翻译自&#xff1a;https://ai.meta.com/blog/meta-llama-3/ 要点…

vue实现文字转语音的组件,class类封装,实现项目介绍文字播放,不需安装任何包和插件(2024-04-17)

1、项目界面截图 2、封装class类方法&#xff08;实例化调用&#xff09; // 语音播报的函数 export default class SpeakVoice {constructor(vm, config) {let that thisthat._vm vmthat.config {text: 春江潮水连海平&#xff0c;海上明月共潮生。滟滟随波千万里&#xf…

Android Gradle插件对应的Gradle脚本所需版本

gradle/wrapper目录 gradle-wrapper.properties 文件对应的是脚本版本 distributionUrlhttps\://services.gradle.org/distributions/gradle-7.5-bin.zip根目录中 build.gradle 文件中 对应的 插件版本 如 7.4.2 buildscript {ext.kotlin_version 1.7.0dependencies {classp…

5G网络架构;6G网络架构

目录 5G和6G架构 6G网络架构 5G和6G架构 在设计和功能上有显著的区别,这主要体现在它们各自的核心特点、优势和应用场景上。 5G技术架构的核心特点包括高速率与低延迟、大容量与高密度以及网络切片。高速率与低延迟极大地提升了用户体验,支持更多实时应用和大规模数据传输…

PS-ZB转座子分析流程2-重新分析并总结

数据处理 数据质控 随机挑出九个序列进行比对&#xff0c;结果如下&#xff1a; 所有序列前面的部分序列均完全相同&#xff0c;怀疑是插入的转座子序列&#xff0c;再随机挑选9个序列进行比对&#xff0c;结果如下&#xff1a; 结果相同&#xff0c;使用cutadapt将该段序列修…

mybatis(5)参数处理+语句查询

参数处理&#xff0b;语句查询 1、简单单个参数2、Map参数3、实体类参数4、多参数5、Param注解6、语句查询6.1 返回一个实体类对象6.2 返回多个实体类对象 List<>6.3 返回一个Map对象6.4 返回多个Map对象 List<Map>6.5 返回一个大Map6.6 结果映射6.6.1 使用resultM…

Windows10安装配置nodejs环境

一、下载 下载地址&#xff1a;https://nodejs.cn/download/ ​ 二、安装 1、找到node-v16.17.0-x64.msi安装包, 根据默认提示安装, 过程中间的弹窗不勾选 2、安装完成后, 打开powershell(管理员身份) ​ 3、命令行输入 node -v 和 npm -v 如下图所示则nodejs安装成功 ​ 三…

A27 STM32_HAL库函数 之 IRDA通用驱动 -- B -- 所有函数的介绍及使用

A27 STM32_HAL库函数 之 IRDA通用驱动 -- B -- 所有函数的介绍及使用 1 该驱动函数预览1.11 HAL_IRDA_DMAPause1.12 HAL_IRDA_DMAResume1.13 HAL_IRDA_DMAStop1.14 HAL_IRDA_Abort1.15 HAL_IRDA_AbortTransmit1.16 HAL_IRDA_AbortReceive1.17 HAL_IRDA_Abort_IT1.18 HAL_IRDA_A…

JavaScript Promise与async/await

Promise与async/await 为什么要使用他们如何使用.then() 和.catch()如何将相同的代码转换成sync和Await关键字 为什么要使用他们 前面学习了JavaScript的简单类型&#xff08;例如 数字和字符串&#xff09;&#xff0c;我们的代码会按顺序从上往下执行 console.log(1111); c…

并发编程之ConcurrentHashMap源码分析

1. 主源码逻辑 final V putVal(K key, V value, boolean onlyIfAbsent) {if (key null || value null) throw new NullPointerException();// 1.计算key对应的hashint hash spread(key.hashCode());int binCount 0;// 2. 进行自旋 for (Node<K,V>[] tab table;;) {N…

Win11启用HyperV

Win11启用HyperV 编辑一个txt&#xff0c;输入下面的指令 pushd "%~dp0"dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txtfor /f %%i in (findstr /i . hyper-v.txt 2^>nul) do dism /online /norestart /add-package:"%SystemRoot%…

PLC中连接外部现场设备和CPU的桥梁——输入/输出(I/O)模块

输入&#xff08;Input&#xff09;模块和输出&#xff08;Output&#xff09;模块简称为I/O模块&#xff0c;数字量&#xff08;Digital&#xff0c;又称为开关量&#xff09;输入模块和数字量输出模块简称为DI模块和DQ模块&#xff0c;模拟量&#xff08;Analog&#xff09;输…

第3章 数据

第3章 数据 学习笔记书后练习问题3问题7问题10问题11问题21 学习笔记 value value - 0; 通常用于将字符转换为其对应的整数值enum Jar_Type { CUP, PINT, QUART, HALF_GALLON, GALLON }; 这些符号名的实际值都是整型值&#xff0c;例如&#xff0c;CUP 是0&#xff0c;PINT …

Android安卓写入WIFI热点自动连接NDEF标签

本示例使用的发卡器&#xff1a;Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/网址/海报-淘宝网 (taobao.com) package com.usbreadertest;import android.os.Bundle; import android.view.MenuItem; import android.view.View; import android.widget.EditText; impo…

JAVA算法训练营打卡总结

目录 初心 目标 挑战 总结 初心 过完年后&#xff0c;突然发现自毕业后到现在已经工作将近两年&#xff0c;在这段时间中除了工作和备考软考外&#xff0c;也就是算法偶尔的刷几道&#xff0c;其它没有什么实际上的提升。 抱着现在的时间不去提升那以后就更没时间提升的心…

LabVIEW频谱感知实验平台

LabVIEW频谱感知实验平台 在当前的通信网络中&#xff0c;频谱资源的高效利用成为了研究和实践的重要方向之一。随着无线通信技术的快速发展&#xff0c;传统的固定频谱分配策略已无法满足日益增长的通信需求&#xff0c;因此&#xff0c;频谱感知技术作为认知无线电的核心组成…