当前位置：首页 > news >正文

【Canvas技法】在Canvas按圆周绘制图形或是标注文字时，角度累加的方向为顺时针，起点为x轴正向

news 2026/5/12 22:41:55

【图解说明】

【核心代码】

        // 画圆弧及方向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…...

编程日记 2024/4/12 22:51:29

计算机网络-TCP断开连接阶段错误应对机制

连接断开阶段四次挥手机制：TCP连接的断开需要四次挥手，这是因为双方都需要独立地关闭数据传输。第二次和第三次挥手不能合并，因为在回复第二次挥手的时候，可能还有数据没有接收完成，所以需要先回复ACK报文&#xff0c…...

编程日记 2024/4/12 22:49:28

springboot动态使用DruidDataSource切换数据源（动态配置多个数据源）

1、添加依赖，在pom文件中添加 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>2.5.0</version></dependency><dependency><grou…...

编程日记 2024/4/12 22:47:26

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|…...

编程日记 2024/4/12 22:45:24

没有网没有移动存储的情况下两台电脑如何互相传输数据

无网无移动存储情况下两台电脑数据互传探秘一、直连网线传输数据二、局域网文件共享其他在信息化时代的今天，电脑作为重要的数据处理工具，在日常生活和工作中扮演着不可或缺的角色。然而，有时我们会遇到一些特殊情况，如没有网络…...

编程日记 2024/4/12 22:43:22

如何用putty通过ssh连接ubuntu

1. 下载和安装PuTTY 访问PuTTY官网下载PuTTY的最新版本。 2. 打开PuTTY 解压下载的文件后，找到PuTTY文件并双击打开。 3. 配置SSH连接在ubuntu下安装ssh服务在安装ssh时，我一直遇到一个问题，原因是我的虚拟机连不上网，反复实…...

编程日记 2024/4/12 22:42:21

java如何实现rabbitmq的消息确认机制和消息持久化机制配置和示例

在Java中，使用RabbitMQ的客户端库（通常是AMQP客户端库，如RabbitMQ的Java客户端）可以方便地实现消息确认机制和消息持久化机制。以下是如何实现这两个机制的示例。 1、消息确认机制 RabbitMQ支持两种类型的确认：生产者…...

编程日记 2024/4/12 22:41:20

react 组件：Suspense

允许在子组件完成加载前展示后备方案。 children：真正的 UI 渲染内容。如果 children 在渲染中被挂起，Suspense 边界将会渲染 fallback。 fallback：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。后…...

编程日记 2024/4/12 22:40:19

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…...

编程日记 2024/4/12 22:34:13

python字符切片的规则

跟range一样有三个参数，分别是x:y:z，代表的含义分别为左边界，右边界（注意该范围是左闭右开的，也就是说取不到右值）和步长。 1. 切片是从左往右还是从右往左，看的是步长的正负，如果步…...

编程日记 2024/4/12 22:33:12

C++ 的内存安全与效率

在C编程中，内存安全和效率是两个至关重要的考虑因素。内存安全涉及确保程序在分配和使用内存时不会发生错误，如内存泄漏、悬挂指针、越界访问、空指针解引用等； 效率则关注如何有效地使用内存资源，减少不必要的内存分配和释放操…...

编程日记 2024/4/12 22:31:10

Go 实战｜使用 Wails 构建轻量级的桌面应用：仿微信登录界面 Demo

概述本文探讨 Wails 框架的使用，从搭建环境到开发，再到最终的构建打包，本项目源码 GitHub 地址：https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架，他允许开发者利用 Go …...

编程日记 2024/4/12 22:30:09

c++取经之路(其五)——类和对象拷贝构造函数

概念：拷贝构造函数，只有单个形参，该形参是对本类类型对象的引用(一般常用const修饰)，在用已存在的类类型对象创建新对象时由编译器自动调用。特征： 1. 拷贝构造函数是构造函数的一个重载形式如： 2. 拷贝…...

编程日记 2024/4/12 22:29:07

YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)，有效提升小目标检测性能，大幅度拉升目标检测效果！遥遥领先！

YOLOv8最新改进系列：YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)，有效提升小目标检测性能，大幅度拉升目标检测效果！遥遥领先！ B站全文戳这里！ 详细的改进教程以及源码…...

编程日记 2024/4/12 22:25:04

【计算机毕业设计】网上宠物商店管理系统——后附源码

🎉**欢迎来到我的技术世界！**🎉 📘 博主小档案： 一名来自世界500强的资深程序媛，毕业于国内知名985高校。 🔧 技术专长： 在深度学习任务中展现出卓越的能力，包括但不限于…...

编程日记 2024/4/12 22:24:02

详解Qt添加外部库

在Qt项目中添加外部库是一项常见任务，无论是静态库还是动态库都需要正确的配置才能让项目顺利编译链接。以下是详细步骤和不同场景下的配置方法： 方法一：手动编辑.pro文件添加头文件路径： 在Qt项目中的.pro文件中使用INCLUDEPAT…...

编程日记 2024/4/12 22:22:00

深入理解JVM垃圾收集器

相关系列深入理解JVM垃圾收集算法-CSDN博客目前市面常见的垃圾收集器有Serial、ParNew、Parallel、CMS、Serial Old、Parallel Old、G1、ZGC以及有二种不常见的Epsilon、Shenandoah的，从上图可以看到有连线的的垃圾收集器是可以组合使用，是年轻代老年代…...

编程日记 2024/4/12 22:20:59

macU盘在电脑上读不出来 u盘mac读不出来怎么办 macu盘不能写入 Tuxera NTFS for Mac免费下载

对于Mac用户来说，使用U盘是很常见的操作，但有时候可能会遇到Mac电脑无法读取U盘的情况，这时候就需要使用一些特定的工具软件来帮助我们解决问题。本文就来告诉大家macU盘在电脑上读不出来是怎么回事，u盘mac读不出来怎么办。一、m…...

编程日记 2024/4/12 22:18:57

448.找到所有数组中消失的数字（原地修改）

给你一个含 n 个整数的数组 nums ，其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字，并以数组的形式返回结果。示例 1： 输入：nums [4,3,2,7,8,2,3,1] 输出：[5,6] 原地修改 …...

编程日记 2024/4/12 22:17:56

Redis学习从入门到掌握（基础篇）

文章目录一、初识Redis1.认识 Redis2.Redis常见命令（1）Redis 数据结构介绍（2）Redis 通用命令（3）String 类型（4）String 类型的常见命令（5）Hash 类型&#xff…...

编程日记 2024/4/12 22:15:54

长期使用Taotoken Token Plan套餐带来的成本控制感受

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度长期使用Taotoken Token Plan套餐带来的成本控制感受 1. 从按需付费到预算规划对于个人开发者或小型团队而言，大模型…...

编程新知 2026/5/12 22:39:32

本地AI任务编排工具AgentForge：从看板管理到多代理协作

1. 项目概述：一个能调度AI编码代理的本地看板工具如果你和我一样，日常开发中经常需要让Claude Code这类AI编码助手去执行一些重复性的代码审查、重构或者生成任务，并且希望这些任务能像CI/CD流水线一样被编排、调度和监控，那么你一…...

编程新知 2026/5/12 22:00:42

Unity（十六）切换场景及鼠标相关

场景切换空间命名：using UnityEngine.SceneManagement;直接用代码切换场景有问题要把场景加入到场景列表之中SceneList哪个场景在前面，谁在运行时就会首先进入过时方法Application.LoadLevel()if (Input.GetKeyDown(KeyCode.Space)) {SceneManager.LoadS…...

编程新知 2026/5/12 21:58:42

告别繁琐操作：一键下载国家中小学智慧教育平台电子课本的智能解决方案

告别繁琐操作：一键下载国家中小学智慧教育平台电子课本的智能解决方案【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台电子课本下载工具，帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载，让您更方便地获取课本内…...

编程新知 2026/5/12 19:13:47

如何轻松解锁QQ音乐加密文件：qmcdump实战指南

如何轻松解锁QQ音乐加密文件：qmcdump实战指南【免费下载链接】qmcdump 一个简单的QQ音乐解码（qmcflac/qmc0/qmc3 转 flac/mp3），仅为个人学习参考用。项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump 你是否曾经下载…...

编程新知 2026/5/12 18:26:15

Windows 10/11下MySQL 8.0.28安装失败？‘服务没有响应控制功能’报错保姆级修复指南

Windows平台MySQL安装报错终极解决方案：从"服务无响应"到完美运行遇到MySQL安装过程中弹出"服务没有响应控制功能"的红色报错窗口时，很多开发者第一反应是重装系统或更换数据库——别急！这个看似复杂的错误其实90%以上源…...

编程新知 2026/5/12 18:24:15

Mac用户的跨平台文件交换终极解决方案：免费NTFS读写工具Nigate完整指南

Mac用户的跨平台文件交换终极解决方案：免费NTFS读写工具Nigate完整指南【免费下载链接】Free-NTFS-for-Mac Nigate: An open-source NTFS utility for Mac. It supports all Mac models (Intel and Apple Silicon), providing full read-write access, mounting, a…...

编程新知 2026/5/12 18:09:36

观察Taotoken Token Plan套餐在长期项目中的成本控制效果

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度观察Taotoken Token Plan套餐在长期项目中的成本控制效果对于需要长期、稳定调用大模型API的项目而言，成本的可预测性…...

编程新知 2026/5/12 17:18:59

解放双手：D3KeyHelper让暗黑3游戏操作变得前所未有的简单

解放双手：D3KeyHelper让暗黑3游戏操作变得前所未有的简单【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面，可自定义配置的暗黑3鼠标宏工具。项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑3中繁琐的技能循环和…...

编程新知 2026/5/12 17:06:22

Midjourney Basic计划真实体验：7天高强度测试+37组对比图，揭示隐藏限制与生产力断层

更多请点击： https://intelliparadigm.com 第一章：Midjourney Basic计划真实体验：7天高强度测试37组对比图，揭示隐藏限制与生产力断层过去一周，我以全职创作者身份深度使用 Midjourney Basic 计划（$10/月…...

编程新知 2026/5/12 16:00:27

【图解说明】

【核心代码】

【全体代码】

END

相关文章：