【Canvas与艺术】环状合掌纹

news2024/11/17 19:47:44

【成图】

【代码】

<!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 onload="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </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);// 清屏	
	}

	// 画前景
	this.paintFg=function(ctx){
		// 底色
		ctx.fillStyle = "white";
		ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

		// 合掌纹饰绘制开始
		const R=100;			 // 最外缘半径
		var   N=20;				 // 个数
		ctx.lineWidth=1;
		const T=R/12;			 // 厚度，外缘到内缘的厚度
		const PART_T=T/3;		 // 三分之一厚度
		const ANGLE=Math.PI*2/N; //分度角
		const PART_ANGLE=ANGLE/8;// 分度角的八分之一
				
		for(var i=0;i<N;i++){
			var theta=Math.PI*2/N*i;
			var r=R-T;
			var a=createPt(r*Math.cos(theta),r*Math.sin(theta));
			var b=createPt(r*Math.cos(theta+PART_ANGLE),r*Math.sin(theta+PART_ANGLE));

			r=T;
			var angle=theta+PART_ANGLE;
			var c=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));

			r=R;
			var d=createPt(r*Math.cos(theta+4*PART_ANGLE),r*Math.sin(theta+4*PART_ANGLE));

			angle=theta+4*PART_ANGLE+Math.PI;
			r=2*PART_T;
			var e=createPt(d.x+r*Math.cos(angle),d.y+r*Math.sin(angle));

			angle=theta+3*PART_ANGLE;
			r=R-2*PART_T;
			var f=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+3*PART_ANGLE;
			r=R-1*PART_T;
			var g=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+2*PART_ANGLE;
			r=R-1*PART_T;
			var h=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+2*PART_ANGLE;
			r=R-T;
			var j=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+7*PART_ANGLE;
			r=R-T;
			var k=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+7*PART_ANGLE;
			r=R-1*PART_T;
			var l=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+6*PART_ANGLE;
			r=R-1*PART_T;
			var m=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+6*PART_ANGLE;
			r=R-2*PART_T;
			var n=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+5*PART_ANGLE;
			r=R-2*PART_T;
			var o=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+5*PART_ANGLE;
			r=R;
			var p=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+8*PART_ANGLE;
			r=R;
			var q=createPt(r*Math.cos(angle),r*Math.sin(angle));

			angle=theta+8*PART_ANGLE;
			r=R-T;
			var s=createPt(r*Math.cos(angle),r*Math.sin(angle));
			
			ctx.strokeStyle="red";
			ctx.beginPath();
			ctx.moveTo(a.x,a.y);
			ctx.arc(0,0,R-T,theta,theta+PART_ANGLE,false);
			ctx.lineTo(b.x,b.y);
			ctx.lineTo(c.x,c.y);
			ctx.arc(0,0,R,theta+PART_ANGLE,theta+4*PART_ANGLE,false);
			ctx.lineTo(d.x,d.y);
			ctx.lineTo(e.x,e.y);
			ctx.arc(0,0,R-2*PART_T,theta+4*PART_ANGLE,theta+3*PART_ANGLE,true);
			ctx.lineTo(f.x,f.y);
			ctx.lineTo(g.x,g.y);
			ctx.arc(0,0,R-1*PART_T,theta+3*PART_ANGLE,theta+2*PART_ANGLE,true);
			ctx.lineTo(h.x,h.y);
			ctx.lineTo(j.x,j.y);
			ctx.arc(0,0,R-T,theta+2*PART_ANGLE,theta+7*PART_ANGLE,false);
			ctx.lineTo(k.x,k.y);
			ctx.lineTo(l.x,l.y);
			ctx.arc(0,0,R-1*PART_T,theta+7*PART_ANGLE,theta+6*PART_ANGLE,true);
			ctx.lineTo(m.x,m.y);
			ctx.lineTo(n.x,n.y);
			ctx.arc(0,0,R-2*PART_T,theta+6*PART_ANGLE,theta+5*PART_ANGLE,true);
			ctx.lineTo(o.x,o.y);
			ctx.lineTo(p.x,p.y);
			ctx.arc(0,0,R,theta+5*PART_ANGLE,theta+8*PART_ANGLE,false);
			ctx.lineTo(q.x,q.y);
			ctx.lineTo(s.x,s.y);
			
			ctx.stroke();
		}

		// 小六边形
		N=6;
		var r1=1.3*R;
		ctx.strokeStyle="red";
		ctx.lineWidth=4;
		ctx.beginPath();			
		for(var i=0;i<N;i++){
			var theta=Math.PI*2/N*i;
			var r=r1;
			var a=createPt(r*Math.cos(theta),r*Math.sin(theta));
			ctx.lineTo(a.x,a.y);
		}
		ctx.closePath();
		ctx.stroke();

		// 大六边形
		N=6;
		var r1=1.4*R;
		ctx.strokeStyle="red";
		ctx.lineWidth=6;
		ctx.beginPath();			
		for(var i=0;i<N;i++){
			var theta=Math.PI*2/N*i;
			var r=r1;
			var a=createPt(r*Math.cos(theta),r*Math.sin(theta));
			ctx.lineTo(a.x,a.y);
		}
		ctx.closePath();
		ctx.stroke();
		
		writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火原创","8px consolas","lightgrey");// 版权
	}
}

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

END

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

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

相关文章

45.5【C语言】typedef

45.5【C语言】typedef

目录&#xff1a; *全称 *格式 一般指针 数组指针 函数指针 *细节 *全称 type define 类型&#xff08;重新&#xff09;定义&#xff08;或命名&#xff09;&#xff0c;可简化输入 *格式 1.非指针类型: typedef 类型 简化名称 typedef signed long long k; signed long …
阅读更多...
SOMEIP_ETS_059: ResetInterface_wrong_Fire_and_forget_package_get_No_Error_back

SOMEIP_ETS_059: ResetInterface_wrong_Fire_and_forget_package_get_No_Error_back

测试目的&#xff1a; 验证设备&#xff08;DUT&#xff09;在接收到一个错误的Fire&Forget消息时&#xff0c;不会做出响应或发送错误消息。 描述 本测试用例旨在检查DUT在接收到使用无效接口版本的方法resetInterface的Fire&Forget消息时&#xff0c;是否不会回应…
阅读更多...
四川财谷通信息技术有限公司抖音小店，打造新生态

四川财谷通信息技术有限公司抖音小店，打造新生态

在当今这个数字化浪潮汹涌的时代&#xff0c;电商行业以其独特的魅力和无限潜力&#xff0c;成为了推动经济发展的重要力量。抖音&#xff0c;作为短视频领域的佼佼者&#xff0c;其抖音小店功能的推出&#xff0c;更是为众多商家开辟了一条全新的销售渠道。四川财谷通信息技术…
阅读更多...
【计算机操作系统】虚拟内存的基本概念

【计算机操作系统】虚拟内存的基本概念

文章目录 虚拟内存的基本概念传统存储管理方式的特征&缺点局部性原理虚拟内存的定义和特征虚拟内存的定义虚拟内存的特征 虚拟内存技术的实现 虚拟内存的基本概念 前面已经介绍过内存管理相关的重点&#xff0c;传统存储管理方式、覆盖与交换技术、地址转换和存储保护在之…
阅读更多...
企业监控大盘Grafana

企业监控大盘Grafana

企业监控大盘Grafana Grafana简述 Grafana 是一个开源的度量分析与可视化工具。提供查询、可视化、报警和指标展示等功能&#xff0c;能灵活创建图表、仪表盘等可视化界面 主要功能&#xff1a; 可视化: 提供多种可选择的不同类型的图形&#xff0c;能够灵活绘制不同样式&…
阅读更多...
css 宫格样式内容上下结构

css 宫格样式内容上下结构

结构 <div class"sc-content-group"><div class"sc-content-item"><div class"sc-item-img"><el-image :src"src" :preview-src-list"[src]"></el-image></div><div class"s…
阅读更多...
放弃你的 KPI。改用这种方法

放弃你的 KPI。改用这种方法

如果您和我一样&#xff0c;那么大约十二年前&#xff0c;您就因为 Eric Ries 而加入了 MVP/精益创业潮流。谁不想“利用持续创新打造出极为成功的企业”呢&#xff1f; 但当你读到这句话时&#xff0c;你可能会注意到一些事情。精益求精并专注于最低限度的可行性是给初创公司的…
阅读更多...
深入了解Elasticsearch集群：Elasticsearch集群的工作原理与优化策略

深入了解Elasticsearch集群：Elasticsearch集群的工作原理与优化策略

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 ELasticsearch作为一个分布式搜索引擎&#xff0c;能够出色地支持集群模式、动态水平扩容、故障转移等分布式系统特性&…
阅读更多...
第二证券：什么是股票打板？怎么打板？

第二证券：什么是股票打板？怎么打板？

打板&#xff0c;指的是在股价即将涨停或许涨停之后再进行挂单介入&#xff0c;不涨停不进入&#xff0c;股票打板寻求的是出资更大的确认性。 打板的步骤&#xff1a; 1、复盘并对下一个交易日行情进行判别 出资者能够把其时交易日的商场条理树立清楚&#xff0c;找出主线板…
阅读更多...
PWM驱动电机系列——PID控制 (各电机设备之间的驱动差异及区别)自动控制系统的性能指标

PWM驱动电机系列——PID控制 (各电机设备之间的驱动差异及区别)自动控制系统的性能指标

电机驱动 直流电机&#xff1a;类似于驱动LED亮灭一样&#xff0c;根据电机的电路原理图判断是什么数字电平有效。 步进电机&#xff1a;类似于驱动LED的周期翻转一样&#xff0c;在一个周期里面进行对步进电机的IO电平的自动翻转&#xff0c;LED!LED 。(1)使用的定时器方式&…
阅读更多...
C#/WinForm实现炸弹人游戏

C#/WinForm实现炸弹人游戏

游戏类设计 代码地址&#xff08;gitee&#xff09;&#xff1a;炸弹人游戏: WinForm实现炸弹人游戏
阅读更多...
开源大屏设计工具DataRoom

开源大屏设计工具DataRoom

DataRoom是一个开源项目&#xff0c;主要作为一个数据共享与协作平台&#xff0c;同时也具备大屏可视化设计器的功能。 开源地址&#xff1a;DataRoom: &#x1f525;基于Vue的大屏可视化设计器&#xff0c;前后端一体化解决方案&#xff0c;几十种炫酷图表&#xff0c;支持多种…
阅读更多...
曝光无线领夹麦克风选购五大陷阱：选麦克风谨防音质粗劣夸大宣传

曝光无线领夹麦克风选购五大陷阱：选麦克风谨防音质粗劣夸大宣传

在移动录制与现场直播日益普及的时代背景下&#xff0c;无线领夹麦克风成为了众多专业人士与爱好者的首选装备。但在这个看似大热的市场背后&#xff0c;却隐藏着不少消费者难以察觉的“坑”。部分品牌为了抢占市场份额&#xff0c;不惜以牺牲品质为代价&#xff0c;通过夸大宣…
阅读更多...
如何使用cornerstone3D渲染3D影像

如何使用cornerstone3D渲染3D影像

&#x1f353; 前言 在日常开发中经常会遇到除了渲染MPR视图外&#xff0c;还需要渲染3D扫描影像&#xff0c;本文从具体的实现、viewport type解读、场景预设等方面来介绍3D具体的实现及涉及到的相关概念。 &#x1f951; 效果演示 点击查看完整代码 &#x1f352; 实现及概…
阅读更多...
ArcMap教程(01)：制作人口专题图

ArcMap教程(01)：制作人口专题图

文章目录 01、ArcGIS专题图制作第一步：插入数据框第一步：加载人口分级地图第二步：添加范围指示器第三步：修改样式1、添加标题2、添加比例尺3、添加指北针4、插入图例01、ArcGIS专题图制作 第一步：插入数据框 1、工具栏【插入】–>【数据库】 2、选中图层下的【宜昌市…
阅读更多...
Python酷库之旅-第三方库Pandas(092)

Python酷库之旅-第三方库Pandas(092)

目录 一、用法精讲 391、pandas.Series.hist方法 391-1、语法 391-2、参数 391-3、功能 391-4、返回值 391-5、说明 391-6、用法 391-6-1、数据准备 391-6-2、代码示例 391-6-3、结果输出 392、pandas.Series.to_pickle方法 392-1、语法 392-2、参数 392-3、功能…
阅读更多...
token令牌，过滤器，JWT，拦截器

token令牌，过滤器，JWT，拦截器

令牌(token)技术 不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了 1.基本流程 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一个token 客户端存储token&#…
阅读更多...
大模型学习笔记 - LLM 之 LLaMA系列（待更新）

大模型学习笔记 - LLM 之 LLaMA系列（待更新）

LLaMA 系列 LLaMA 概述 LLaMA-1LLaMA-2LLaMA-3 LLaMA 概述 LLaMA: Open and Efficient Foundation Language Models Llama 2: Open Foundation and Fine-Tuned Chat Models (LLama2 & LLama2-Chat) LLama 3 | LLama 3.1 LLaMA-1 涉及到的基础知识点: pre-normalizat…
阅读更多...
Leetcode面试经典150题-25.K个一组反转链表

Leetcode面试经典150题-25.K个一组反转链表

解法都在代码里&#xff0c;不懂就留言或者私信 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val …
阅读更多...
基于java图书销售管理系统设计与实现

基于java图书销售管理系统设计与实现

1引言 随着Internet国际互联网的发展&#xff0c;越来越多的企业开始建造自己的网站。基于Internet的信息服务&#xff0c;商务服务已经成为现代企业一项不可缺少的内容。很多企业都已不满足于建立一个简单的仅仅能够发布信息的静态网站。现代企业需要的是一个功能强大的&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023