JS画摆线

最近看到一个很漂亮的曲线,研究了一下。

从圆心画一条线匀速转动,终点再画一条线转动,2条线转速不同,会画出很漂亮的花纹。

 

一个周期

 完整周期

<html>
<style>
body { background:black; }
p { text-align:center; color:white; }
canvas { display:block; margin:auto; }
</style>
<body>
<p><input type="checkbox" id="check">轨迹</p>
<canvas id="canvas"></canvas>
<script>
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'white';var R = 200;
var q1 = 0, q2 = 0;
var x0 = canvas.width/2;
var y0 = canvas.height/2;function draw() {if (!check.checked) {ctx.beginPath();ctx.clearRect(0, 0, canvas.width, canvas.height);}	x1 = R * Math.cos(q1) + x0;y1 = -R * Math.sin(q1) + y0;if (!check.checked) {	ctx.moveTo(x0, y0);ctx.lineTo(x1, y1);}x2 = R * Math.cos(q2) + x1;y2 = -R * Math.sin(q2) + y1;ctx.lineTo(x2, y2);ctx.stroke();q1 += 0.1;q2 += 0.21;
}function cls() {ctx.beginPath();ctx.clearRect(0, 0, canvas.width, canvas.height);
}check.onchange = function(){ cls(); };setInterval(draw, 50);
</script>
</body>
</html>

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

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

相关文章

学习Android的第十八天

目录 Android 可复用 BaseAdapter 为什么使用BaseAdapter&#xff1f; 如何使用BaseAdapter&#xff1f; Android GridView 网格视图 GridView 属性 示例 Android Spinner 下拉选项框 Spinner Spinner 属性 示例 Android AutoCompleteTextView 自动完成文本框 Auto…

LeetCode 热题100 刷题笔记

一&#xff1a;哈希表 一般哈希表都是用来快速判断一个元素是否出现集合里。 直白来讲其实数组就是一张哈希表&#xff0c;哈希表中关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素。 1.两数之和 题目链接&#xff1a;. - 力扣&#xff08;LeetCode…

搭建XSS 测试平台

XSS 测试平台是测试XSS漏洞获取cookie并接收Web 页面的平台&#xff0c;XSS 可以做 JS能做的所有事&#xff0c;包括但不限于窃取cookie、后台增删改文章、钓鱼、利用XSS漏洞进 行传播、修改网页代码、网站重定向、获取用户信息(如浏览器信息、IP 地址)等。这 里使用的是基于x…

go并发模式之----阻塞/屏障模式

常见模式之一&#xff1a;阻塞/屏障模式 定义 顾名思义&#xff0c;就是阻塞等待所有goroutine&#xff0c;直到所有goroutine完成&#xff0c;聚合所有结果 使用场景 多个网络请求&#xff0c;聚合结果 大任务拆分成多个子任务&#xff0c;聚合结果 示例 package main ​…

合唱队形(洛谷)

问题&#xff1a;合唱队形 题解&#xff1a;这题其实想明白了很简单的&#xff0c;但是要注意细节&#xff08;说给我自己听的&#xff0c;明明很简单的题&#xff0c;却还要浪费了一部分时间&#xff0c;可恶&#xff0c;下次要更好的检查代码&#xff09; 首先我们分析这道题…

express+mysql+vue,从零搭建一个商城管理系统7--token

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、安装jsonwebtoken二、新建config/jwt.js三、修改models/user.js四、修改routes下的user.js五、修改index.js六、Api新建user/queryUserList接口七、token验证失败示例总结 前言 需求&#xff1a;主要学习…

程序媛的mac修炼手册-- Node.js入门篇

最近因为参与一个微信小程序的开发&#xff0c;开始摸索JavaScript。期间&#xff0c;需要基于Node.js安装微信开发工具的依赖项&#xff0c;所以又顺带学习了Node.js的包管理工具npm&#xff08;Node Package Manager&#xff09;。不过&#xff0c;之前看到国外的全栈大佬​​…

LINUX基础培训二十五之shell表达式与运算

一、条件表达式 条件表达式是用于判断条件是否满足的逻辑表达式&#xff0c;当条件为真&#xff0c;返回0&#xff0c;否则返回1。 常用语法&#xff1a; 1、test 测试表达式 2、[ 测试表达式 ] #两边需要有空格 3、[[ 测试表达式 ]] 4、(( 测试表达式 )) 第一种和第二种是等…

预训练概念

预训练是指在特定任务之前&#xff0c;在大规模数据集上对神经网络进行训练以学习通用的表示形式或特征。这些通用表示可以捕捉数据中的统计结构和语义信息&#xff0c;使得神经网络能够更好地理解和处理输入数据。 在大规模预训练模型中&#xff0c;通常会使用无监督或弱监督的…

377组合总和 Ⅳ

题目 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。题目数据保证答案符合 32 位整数范围。示例 1&#xff1a;输入&#xff1a;nums [1,2,3], target 4 输出&#xff1a;7 解释&…

多人同时导出 Excel 干崩服务器?我们来实现一个排队导出功能!

考虑到数据库数据日渐增多&#xff0c;导出会有全量数据的导出&#xff0c;多人同时导出可以会对服务性能造成影响&#xff0c;导出涉及到mysql查询的io操作&#xff0c;还涉及文件输入、输出流的io操作&#xff0c;所以对服务器的性能会影响的比较大&#xff1b; 结合以上原因…

西软云XMS futurehotel/operate XXE漏洞复现

0x01 产品简介 西软云XMS是基于云平台数据中心开发的支持多酒店、多语言、多平台的酒店管理系统。致力于以新一代云架构为国内四,五星级中高端酒店提供灵活、高度整合酒店业务,助力酒店智能转型升级。 0x02 漏洞复现 西软云XMS /XopServerRS/rest/futurehotel/operate接口…