用canvas画一个魔法阵

最新推荐文章于 2022-12-23 15:35:06 发布
最新推荐文章于 2022-12-23 15:35:06 发布
阅读量519 收藏 4
点赞数 1
分类专栏： html canvas 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40504108/article/details/107534767
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#can {
				border: 1px solid #000000;
				background-color: black;
			}
		</style>
	</head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<body>
		<canvas id="can" width="550" height="550">
			你的浏览器不支持 canvas，请升级你的浏览器
		</canvas>
	</body>
	<script type="text/javascript">
		var c = document.getElementById("can");
		var ctx = c.getContext('2d');
		var colors = ["white", "rgb(246,233,249)", "#C5EEF2", "rgb(1,198,246)", "rgb(230,167,239)", "rgb(252,247,175)",
			"rgb(242,60,153)", "rgb(166,220,246)",
			"rgb(230,94,85)", "rgb(112,254,115)"
		];//颜色数组
		var chars = ["♈", "♉ ", "♊", "♋", "♌", "♍", " ♎", " ♏", " ♐", "♑", " ♒", "♓"]; //12星座
		setInterval(function() {//变色
			h = Math.floor(Math.random() * 9);
		}, 200);
		var h = 3;
		draw();

		function draw() {


			var stepClear = 1;
			var time = new Date();
			ctx.clearRect(0, 0, 550, 550);

			function clearArc(x, y, radius) { //圆心(x,y)，半径radius
				var calcWidth = radius - stepClear;
				var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);

				var posX = x - calcWidth;
				var posY = y - calcHeight;

				var widthX = 2 * calcWidth;
				var heightY = 2 * calcHeight;

				if (stepClear <= radius) {
					ctx.clearRect(posX, posY, widthX, heightY);
					stepClear += 1;
					clearArc(x, y, radius);
				}
			}


			ctx.save();
			ctx.strokeStyle = colors[h];
			// ctx.strokeStyle = "rgb(112,254,115)";


			ctx.translate(275, 275);
			ctx.globalCompositeOperation = "destination-over"; //新图像在旧图像下面

			ctx.lineWidth = 3;

			ctx.rotate(-7 * (2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds()));

			ctx.beginPath(); //左侧月亮小圈
			ctx.arc(-170, 0, 50, 0, 2 * Math.PI);
			ctx.stroke();

			ctx.beginPath(); //左侧月亮大圈
			ctx.arc(-187, 0, 75, 0, 2 * Math.PI);
			ctx.stroke();
			ctx.fill();
			clearArc(-170, 0, 48); //清除一个圆形区域

			ctx.beginPath(); //右侧太阳小圈
			ctx.arc(190, 0, 30, 0, 2 * Math.PI);
			ctx.stroke();
			ctx.fill();

			ctx.translate(190, 0); //移动原点画太阳的放射线
			var r = 0,
				R = 90; //太阳外尖三角内部直线
			for (var i = 0; i < 4; i++) {
				if (i != 0) {
					ctx.beginPath();
					ctx.moveTo(Math.cos((i * 90) / 180 * Math.PI) * r, -Math.sin((i * 90) / 180 * Math.PI) * r);
					ctx.lineTo(Math.cos((i * 90) / 180 * Math.PI) * R, -Math.sin((i * 90) / 180 * Math.PI) * R);
					ctx.stroke();
				}
			}


			ctx.beginPath(); //太阳外三个尖三角形
			var r = 20,
				R = 90;
			for (var i = 0; i < 4; i++) {
				if (i != 0) {
					ctx.lineTo(Math.cos((i * 90) / 180 * Math.PI) * R, -Math.sin((i * 90) / 180 * Math.PI) * R);
					ctx.lineTo(-Math.sin((-45 + i * 90) / 180 * Math.PI) * r, -Math.cos((-45 + i * 90) / 180 * Math.PI) * r);
				}
			}
			ctx.closePath();
			ctx.stroke();
			ctx.fill();

			var r = 30,
				R = 60; //太阳外短三角内部直线
			for (var i = 0; i < 4; i++) {
				ctx.beginPath();
				ctx.moveTo(Math.cos((45 + i * 90) / 180 * Math.PI) * r, -Math.sin((45 + i * 90) / 180 * Math.PI) * r);
				ctx.lineTo(Math.cos((45 + i * 90) / 180 * Math.PI) * R, -Math.sin((45 + i * 90) / 180 * Math.PI) * R);
				ctx.stroke();
			}

			ctx.beginPath(); //太阳外三个短三角形
			var r = 30,
				R = 60;
			for (var i = 0; i < 4; i++) {
				ctx.lineTo(Math.cos((45 + i * 90) / 180 * Math.PI) * R, -Math.sin((45 + i * 90) / 180 * Math.PI) * R);
				ctx.lineTo(-Math.sin((i * 90) / 180 * Math.PI) * r, -Math.cos((i * 90) / 180 * Math.PI) * r);

			}
			ctx.stroke();
			ctx.closePath();
			ctx.fill();
			
			ctx.translate(-190, 0);

			ctx.globalCompositeOperation = "source-over"; //东南西北四个字及放字小圆

			ctx.beginPath(); //西的小圆
			ctx.arc(-240, 0, 20, 0, 2 * Math.PI);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath(); //东的小圆
			ctx.arc(240, 0, 20, 0, 2 * Math.PI);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath(); //北的小圆
			ctx.arc(0, -240, 20, 0, 2 * Math.PI);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath(); //南的小圆
			ctx.arc(0, 240, 20, 0, 2 * Math.PI);
			ctx.fill();
			ctx.stroke();

			ctx.lineWidth = 1; //字体线为1
			ctx.font = "30px sans-serif"; //字体大小

			ctx.translate(-255, 0); //绘制西字
			ctx.rotate(2 * Math.PI / 4);
			ctx.strokeText("西", -15, -5);
			ctx.rotate(-2 * Math.PI / 4);
			ctx.translate(255, 0);

			ctx.translate(255, 0); //绘制东字
			ctx.rotate(-2 * Math.PI / 4);
			ctx.strokeText("東", -15, -5);
			ctx.rotate(2 * Math.PI / 4);
			ctx.translate(-255, 0);

			ctx.translate(0, -255); //绘制北字
			ctx.rotate(2 * Math.PI / 2);
			ctx.strokeText("北", -15, -5);
			ctx.rotate(-2 * Math.PI / 2);
			ctx.translate(0, 255);

			ctx.translate(0, 255); //绘制南字
			// ctx.rotate(2 * Math.PI / 2);
			ctx.strokeText("南", -15, -5);
			// ctx.rotate(-2 * Math.PI / 2);
			ctx.translate(0, -255);

			ctx.lineWidth = 3;

			ctx.rotate(7 * (2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds()));

			ctx.beginPath(); //第一个中心五角星  不动的
			var r = 60,
				R = 147;
			for (var i = 0; i < 5; i++) {
				ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R, -Math.sin((18 + i * 72) / 180 * Math.PI) * R);
				ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r, -Math.sin((54 + i * 72) / 180 * Math.PI) * r);
			}
			ctx.closePath();
			ctx.fill();
			ctx.stroke();

			ctx.globalCompositeOperation = "destination-over"; //新图像在旧图像下面

			ctx.rotate(3 * (2 * Math.PI / 30 * time.getSeconds() + 2 * Math.PI / 30000 * time.getMilliseconds())); //第二个五角星顺时针旋转

			ctx.rotate(2 * Math.PI / 10); //旋转1/10，画第二个五角星
			ctx.beginPath();
			var r = 60,
				R = 147;
			for (var i = 0; i < 5; i++) {
				ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R, -Math.sin((18 + i * 72) / 180 * Math.PI) * R);
				ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r, -Math.sin((54 + i * 72) / 180 * Math.PI) * r);
			}
			ctx.closePath();
			ctx.stroke();

			var R = 147; //第二个五角星内的线
			for (var i = 0; i < 5; i++) {
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R, -Math.sin((18 + i * 72) / 180 * Math.PI) * R);
				ctx.stroke();
			}

			ctx.rotate(-2 * Math.PI / 10); //旋转回去

			ctx.lineWidth = 3;
			ctx.beginPath(); //五角星内圈
			ctx.arc(0, 0, 140, 0, 2 * Math.PI);
			ctx.stroke();

			ctx.beginPath(); //五角星外圈
			ctx.arc(0, 0, 148, 0, 2 * Math.PI);
			ctx.stroke();

			var r = 140,
				R = 148; //五角星外圈与内圈之间的连线
			for (var i = 0; i < 36; i++) {
				ctx.beginPath();
				ctx.moveTo(Math.cos((i * 10) / 180 * Math.PI) * r, -Math.sin((i * 10) / 180 * Math.PI) * r);
				ctx.lineTo(Math.cos((i * 10) / 180 * Math.PI) * R, -Math.sin((i * 10) / 180 * Math.PI) * R);
				ctx.stroke();
			}

			ctx.rotate(-(2 * Math.PI / 30 * time.getSeconds() + 2 * Math.PI / 30000 * time.getMilliseconds()));


			ctx.beginPath(); //最外面大圈
			ctx.arc(0, 0, 262, 0, 2 * Math.PI);
			// ctx.closePath();
			ctx.stroke();

			ctx.beginPath(); //第二大圈
			ctx.arc(0, 0, 245, 0, 2 * Math.PI);
			// ctx.closePath();
			ctx.stroke();

			ctx.lineWidth = 5;
			ctx.beginPath(); //第三大圈
			ctx.arc(0, 0, 237, 0, 2 * Math.PI);
			// ctx.closePath();
			ctx.stroke();

			ctx.lineWidth = 3;
			ctx.beginPath(); //第四大圈
			ctx.arc(0, 0, 220, 0, 2 * Math.PI);
			// ctx.closePath();
			ctx.stroke();

			var r = 220,
				R = 237; //第四圈与第三圈之间的连线
			for (var i = 0; i < 36; i++) {
				ctx.beginPath();
				ctx.moveTo(Math.cos((i * 10) / 180 * Math.PI) * r, -Math.sin((i * 10) / 180 * Math.PI) * r);
				ctx.lineTo(Math.cos((i * 10) / 180 * Math.PI) * R, -Math.sin((i * 10) / 180 * Math.PI) * R);
				ctx.stroke();
			}

			ctx.rotate(12 * (2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds()));
			var r = 150,
				R = 210; //正方形内部直线
			for (var i = 0; i < 12; i++) {
				ctx.beginPath();
				ctx.moveTo(Math.cos((30 + i * 30) / 180 * Math.PI) * r, -Math.sin((30 + i * 30) / 180 * Math.PI) * r);
				ctx.lineTo(Math.cos((30 + i * 30) / 180 * Math.PI) * R, -Math.sin((30 + i * 30) / 180 * Math.PI) * R);
				ctx.stroke();
			}

			//三个小正方形
			var r = 210;
			for (var j = 0; j < 4; j++) {
				ctx.beginPath();
				for (var i = 0; i < 4; i++) {
					// ctx.lineTo(0, 0);
					ctx.lineTo(Math.cos((30 * j + i * 90) / 180 * Math.PI) * r, -Math.sin((30 * j + i * 90) / 180 * Math.PI) * r);
				}
				ctx.closePath();
				ctx.stroke();
				ctx.fill();

			}

			var r = 220;
			for (var j = 0; j < 4; j++) {
				ctx.beginPath(); //三个大正方形
				for (var i = 0; i < 4; i++) {
					// ctx.lineTo(0, 0);
					ctx.lineTo(Math.cos((30 * j + i * 90) / 180 * Math.PI) * r, -Math.sin((30 * j + i * 90) / 180 * Math.PI) * r);
				}
				ctx.closePath();
				ctx.stroke();
			}

			ctx.lineWidth = 1; //字体线为1
			ctx.font = "15px sans-serif"; //字体大小


			for (var i = 0; i < 12; i++) {
				ctx.rotate(i * 2 * Math.PI / 12 + 15);
				ctx.translate(-217, 0); //绘制西字
				ctx.rotate(2 * Math.PI / 4);
				ctx.strokeText(chars[i], 5, -5);
				ctx.rotate(-2 * Math.PI / 4);
				ctx.translate(217, 0);
				ctx.rotate(-(i * 2 * Math.PI / 12 + 15));
			}


			ctx.restore();
			stop = requestAnimationFrame(draw);

		}
	</script>
</html>

实现效果如下图：在这里插入图片描述

黄丫丫001
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pythonturtle魔法阵_python turtle 库绘制简单魔法阵
weixin_42494890的博客
02-20 2646
魔法阵样式如下：实现代码：import turtle as trimport numpy as npimport math__radiusBig = 360 # 大圆__radiusSmall = 340 # 小圆def circle():"""绘制外圈的两个圆，半径分别为__radiusBig，__radiusSmall"""# 修改画笔粗细tr.pensize(2)# 画大圆tr.penu...
【译】canvas笔触魔法师
weixin_34257076的博客
12-15 259
阿最近发现的一篇超好文！前一年自己曾有开发网页手绘板，如果当时有看见它就好啦！文末的两个超6效果千万不要错过喔！p.s. 原文每个例子都附带codepen，感兴趣的话可以点进原文挨个进行试验~ 原文地址：Exploring canvas drawing techniques ----------正文分割线---------- 我最近在试验网页手绘的不同风格—比如顺滑笔触，贝塞尔曲线笔触，墨水笔触，...
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
weixin_33827731的博客
11-26 267
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线：   &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; ...
canvas的魔法，X光效果
weixin_30785593的博客
12-10 1901
一 图片预览 HTML5给web开发带来很多好东西，可以说，它将开创新一代web开发。 其中canvas就是它带来的东西之一，canvas非常强大，可以做到很多东西，不过我觉得学习canvas几乎等于在学习一种独立的技术了。这里只是展示一个简单的canvas效果。如下图： 二 原理介绍 我在代码中通过ctx.getImageData(0,0,width,height);获取canvas...
Threejs 传送阵（魔法阵）效果实现
qq_40147088的博客
12-23 1823
threejs 创建传送阵
JS+canvas画一个圆锥实例代码
01-19
我的第一个 HTML 页面</title> </head> <body> <canvas id='cvs' width='1000' height=800> </canvas> [removed] const cvs =document.getElementById('cvs'); // 计算画布的宽度 const width =...
canvas实现一个简易画板
04-18
在前端开发中，Canvas是一个非常重要的元素，它允许开发者通过JavaScript来绘制图形，实现动态的、交互式的网页内容。本文将深入探讨如何使用JavaScript和HTML5的Canvas API来创建一个简易画板，并介绍如何将画板上...
基于canvas画一个太极图
04-29
基于canvas画一个太极图
html5使用canvas画一条线
09-28
本文是html5的一个简单应用，使用canvas画一条线，其实是自己学习canvas之后的一个练习题，这里分享给大家，超级简单。
【光能使者】！！！
iostyle 的博客
08-23 1825
今天要分享的是PathMeasure的玩法。 首先我们来回顾一下童年吧~~90后满满的记忆 光能使者 小时候总是幻想着自己能变身，今天我们就来用代码实现变身的第一步吧，动画绘制一个魔法阵magic_circle~~ magic_circle.jpg 静态图片比较容易，我们用 Path 设置好路径，然后再 canvas.drawPath 即可，但是静态的也太 low 了一点
vue canvas 粒子拼图特效
03-18
基于vue canvas 的动态拼图效果 环境： vue node 使用：npm install 或 cnpm install npm run serve
canvas 绘制八卦图
IT666DHW的博客
09-28 1367
canvas绘制八卦图              var canvas=document.getElementById("canvas");      var context=canvas.getContext('2d');            //1.先绘制一个完整的空心圆      context.beginPath();      context.arc
[NOIP2016普及组]魔法阵
09-10 287
题目：洛谷P2119、Vijos P2012、codevs5624。 题目大意：有n件物品，每件物品有个魔法值。要求组成魔法阵(Xa,Xb,Xc,Xd)，该魔法阵要满足Xa<Xb<Xc<Xd，Xb-Xa=2(Xd-Xc)，并且Xb-Xa<(Xc-Xb)/3。求每件物品作为a、b、c、d的次数。 解题思路：这真是一道锻炼思（bào）维（lì）能力的好（kēng）...
python 魔法阵
mincraftzuo的博客
07-18 2265
想必很多朋友都在动漫里看过魔法阵，今天他来了 以下为代码 import turtle as t def tcyuan(x, y, r): t.fillcolor("black") t.begin_fill() t.seth(0) y = y - r t.penup() t.goto(x, y) t.pendown() t.circle(r) t.end_fill() def yuan(x, y, r): t.seth(0) y = y-r t.penup() ..
python turtle 库绘制简单魔法阵
一VII一 的博客
04-04 6655
实现代码如下： import turtle as tr import numpy as np import math __radiusBig = 360 # 大圆 __radiusSmall = 340 # 小圆 def circle(): """ 绘制外圈的两个圆，半径分别为__radiusBig，__radiusSmall """ # 修改画笔粗细 ...
275. 魔法阵
m0_64569200的博客
07-19 242
题目描述六十年一次的魔法战争就要开始了，lester准备从附近的魔法场中汲取魔法能量。lester有m个魔法物品，编号分别为1,2,...,m。每个物品具有一个魔法值，我们用Xi表示编号为i的物品的魔法值。每个魔法值Xi是不超过n的正整数，可能有多个物品的魔法值相同。...
2017.5.14测试 第2题: 魔法阵
程序难民窟(公墓)(๑ŐдŐ)b
05-17 937
第2题: 魔法阵 【题目描述】  昔有人，名斯凯利恩夫·卢克。其英文名乃SkyLYnf·Luke。汝知之何名？曰实，吾亦不知。其有别号曰ylm。何？吾亦不知。汝宜喻之。其乃吾。 他有一个Servant，叫做阿尔托莉雅·潘德拉贡，英文名是Arturia Pendragon，别名是Saber。她的 誓约胜利之剑（Excalibur）比红A的无限剑制厉害多了！（上一题的红A没有Saber厉害）
腾讯2018安卓实习模拟笔试题——魔法阵
陈小星的博客
03-23 722
真的觉得自己数据结构与算法也太薄弱了，好多stl容器都不会用，真的是练太少了导致很不熟练！
[NOIP2016PJ]魔法阵
weixin_30408165的博客
07-29 411
今天模拟赛的题，，，唯一没有Giao出来的题（不然我就AKIOI了~） 最开始没想到数学题，把所有部分分都说一遍吧： 35分：纯暴力O(M^4)枚举，对于每一组a,b,c,d验证其是否合法。 60分：经过读题，不难发现a,b,c,d单调递增，可以考虑对其进行排序后再暴力枚举，枚举量减少近一半。 85分：对xb-xa=2(xd-xc)进行分析，可以得到以下公式：double((xb...
用Python画出一个魔法阵
最新发布
06-08
以下是用Python绘制一个简单的魔法阵的代码： ```python import turtle # 创建画布和画笔 canvas = turtle.Screen() pen = turtle.Turtle() # 设置画笔颜色和粗细 pen.color("red") pen.width(3) # 绘制圆形 pen...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值