【Canvas技法】在Canvas按圆周绘制图形或是标注文字时，角度累加的方向为顺时针，起点为x轴正向
【图解说明】
【核心代码】
// 画圆弧及方向for(var i=0;i<4;i++){var start=Math.PI/2*i;var end=start+Math.PI/2;var x1=180*Math.cos(start);var y1=180*Math.sin(start);var x2=180*Math.cos(end);var y2=180*Math.sin(end);ctx.beginPath();ctx.arc(0,0,180,start,end,false);ctx.lineTo(x2,y2);ctx.lineTo((x1-x2)/18+x2,(y1-y2)/18+y2);// 复数计算ctx.lineTo(x2,y2);ctx.lineTo((y2-y1)/18+x2,(x1-x2)/18+y2);// 复数计算ctx.lineWidth=2;ctx.strokeStyle=getColor(i);ctx.stroke();}// 标上数字for(var i=0;i<12;i++){var theta=i*Math.PI/6;var x=200*Math.cos(theta);var y=200*Math.sin(theta);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "18px consolas";ctx.fillStyle="black";ctx.fillText(i,x,y+12);}
【全体代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>角度累加的方向为顺时针，起点为x轴正向</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas><img id="myImg" src="125.png" 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.textBaseline="bottom";ctx.textAlign="center";ctx.font = "8px consolas";ctx.fillStyle="black";ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){// 画圆弧及方向for(var i=0;i<4;i++){var start=Math.PI/2*i;var end=start+Math.PI/2;var x1=180*Math.cos(start);var y1=180*Math.sin(start);var x2=180*Math.cos(end);var y2=180*Math.sin(end);ctx.beginPath();ctx.arc(0,0,180,start,end,false);ctx.lineTo(x2,y2);ctx.lineTo((x1-x2)/18+x2,(y1-y2)/18+y2);// 复数计算ctx.lineTo(x2,y2);ctx.lineTo((y2-y1)/18+x2,(x1-x2)/18+y2);// 复数计算ctx.lineWidth=2;ctx.strokeStyle=getColor(i);ctx.stroke();}// 标上数字for(var i=0;i<12;i++){var theta=i*Math.PI/6;var x=200*Math.cos(theta);var y=200*Math.sin(theta);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "18px consolas";ctx.fillStyle="black";ctx.fillText(i,x,y+12);}}
}// 函数，用于取得颜色
function getColor(index){var arr=["rgb(226,69,20)","rgb(253,184,29)","rgb(145,166,2)","rgb(32,164,208)"];return arr[index % arr.length];
}/*---------------------------------------------
十人烧香九为财，不知财从善中来，
为人有德天长佑，行善无求福自来。
----------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas技法】在Canvas按圆周绘制图形或是标注文字时，角度累加的方向为顺时针，起点为x轴正向
【图解说明】 【核心代码】 // 画圆弧及方向for(var i0;i<4;i){var startMath.PI/2*i;var endstartMath.PI/2;var x1180*Math.cos(start);var y1180*Math.sin(start);var x2180*Math.cos(end);var y2180*Math.sin(end);ctx.beginPath();ctx.arc(0,0,180,start,end,false);ct…...
计算机网络-TCP断开连接阶段错误应对机制
连接断开阶段 四次挥手机制：TCP连接的断开需要四次挥手，这是因为双方都需要独立地关闭数据传输。第二次和第三次挥手不能合并，因为在回复第二次挥手的时候，可能还有数据没有接收完成，所以需要先回复ACK报文，…...
springboot动态使用DruidDataSource切换数据源（动态配置多个数据源）
1、添加依赖，在pom文件中添加 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>2.5.0</version></dependency><dependency><grou…...
P8786 [蓝桥杯 2022 省 B] 李白打酒加强版
【dfs题解】---只有50分 (头一回自己用dfs做出来了dp的hard等级的大题，从来没有拿50分这么高兴过哈哈哈哈哈) #include <bits/stdc.h> using namespace std; int n,m; long long ans0; const long long mol1e97; void dfs(int h,int d,int sum) {if(h<0|…...
没有网没有移动存储的情况下两台电脑如何互相传输数据
无网无移动存储情况下两台电脑数据互传探秘 一、直连网线传输数据二、局域网文件共享其他 在信息化时代的今天，电脑作为重要的数据处理工具，在日常生活和工作中扮演着不可或缺的角色。然而，有时我们会遇到一些特殊情况，如没有网络…...
如何用putty通过ssh连接ubuntu
1. 下载和安装PuTTY 访问PuTTY官网下载PuTTY的最新版本。 2. 打开PuTTY 解压下载的文件后，找到PuTTY文件并双击打开。 3. 配置SSH连接 在ubuntu下安装ssh服务在安装ssh时，我一直遇到一个问题，原因是我的虚拟机连不上网，反复实…...
java如何实现rabbitmq的消息确认机制和消息持久化机制配置和示例
在Java中，使用RabbitMQ的客户端库（通常是AMQP客户端库，如RabbitMQ的Java客户端）可以方便地实现消息确认机制和消息持久化机制。以下是如何实现这两个机制的示例。 1、消息确认机制 RabbitMQ支持两种类型的确认：生产者…...
react 组件：Suspense
允许在子组件完成加载前展示后备方案。 children：真正的 UI 渲染内容。如果 children 在渲染中被挂起，Suspense 边界将会渲染 fallback。 fallback：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。后…...
2024-4-5修改vscode的代理
今天在vs code 上面配置go环境的时候出现了以下的报错： 2024-04-05 16:18:00.786 [info] Installing golang.org/x/tools/goplslatest FAILED 2024-04-05 16:18:00.786 [info] { “code”: 1, “killed”: false, “signal”: null, “cmd”: “E:\Go\bin\go.exe in…...
python字符切片的规则
跟range一样有三个参数，分别是x:y:z，代表的含义分别为左边界，右边界（注意该范围是左闭右开的，也就是说取不到右值）和步长。 1. 切片是从左往右还是从右往左，看的是步长的正负，如果步…...
C++ 的内存安全与效率
在C编程中，内存安全和效率是两个至关重要的考虑因素。 内存安全涉及确保程序在分配和使用内存时不会发生错误，如内存泄漏、悬挂指针、越界访问、空指针解引用等； 效率则关注如何有效地使用内存资源，减少不必要的内存分配和释放操…...
Go 实战｜使用 Wails 构建轻量级的桌面应用：仿微信登录界面 Demo
概述 本文探讨 Wails 框架的使用，从搭建环境到开发，再到最终的构建打包，本项目源码 GitHub 地址：https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架，他允许开发者利用 Go …...
c++取经之路(其五)——类和对象拷贝构造函数
概念：拷贝构造函数，只有单个形参，该形参是对本类类型对象的引用(一般常用const修饰)，在用已存在的类类型对象创建新对象时由编译器自动调用。 特征： 1. 拷贝构造函数是构造函数的一个重载形式 如： 2. 拷贝…...
，有效提升小目标检测性能，大幅度拉升目标检测效果！遥遥领先！)
YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)，有效提升小目标检测性能，大幅度拉升目标检测效果！遥遥领先！
YOLOv8最新改进系列：YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)，有效提升小目标检测性能，大幅度拉升目标检测效果！遥遥领先！ B站全文戳这里！ 详细的改进教程以及源码…...
【计算机毕业设计】网上宠物商店管理系统——后附源码
🎉**欢迎来到我的技术世界！**🎉 📘 博主小档案： 一名来自世界500强的资深程序媛，毕业于国内知名985高校。 🔧 技术专长： 在深度学习任务中展现出卓越的能力，包括但不限于…...
详解Qt添加外部库
在Qt项目中添加外部库是一项常见任务，无论是静态库还是动态库都需要正确的配置才能让项目顺利编译链接。以下是详细步骤和不同场景下的配置方法： 方法一：手动编辑.pro文件 添加头文件路径： 在Qt项目中的.pro文件中使用INCLUDEPAT…...
深入理解JVM垃圾收集器
相关系列 深入理解JVM垃圾收集算法-CSDN博客 目前市面常见的垃圾收集器有Serial、ParNew、Parallel、CMS、Serial Old、Parallel Old、G1、ZGC以及有二种不常见的Epsilon、Shenandoah的，从上图可以看到有连线的的垃圾收集器是可以组合使用，是年轻代老年代…...
macU盘在电脑上读不出来 u盘mac读不出来怎么办 macu盘不能写入 Tuxera NTFS for Mac免费下载
对于Mac用户来说，使用U盘是很常见的操作，但有时候可能会遇到Mac电脑无法读取U盘的情况，这时候就需要使用一些特定的工具软件来帮助我们解决问题。本文就来告诉大家macU盘在电脑上读不出来是怎么回事，u盘mac读不出来怎么办。 一、m…...
448.找到所有数组中消失的数字（原地修改）
给你一个含 n 个整数的数组 nums ，其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字，并以数组的形式返回结果。 示例 1： 输入：nums [4,3,2,7,8,2,3,1] 输出：[5,6] 原地修改 …...
Redis学习从入门到掌握（基础篇）
文章目录 一、初识Redis1.认识 Redis2.Redis常见命令（1）Redis 数据结构介绍（2）Redis 通用命令（3）String 类型（4）String 类型的常见命令（5）Hash 类型ÿ…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
【C++进阶篇】智能指针
C内存管理终极指南：智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
数据结构：递归的种类（Types of Recursion）
目录 尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析 头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...