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

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

news 2026/2/8 4:01:57

【图解说明】

【核心代码】

        // 画圆弧及方向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断开连接阶段错误应对机制

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

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

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

1、添加依赖&#xff0c;在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等级的大题&#xff0c;从来没有拿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

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

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

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

如何用putty通过ssh连接ubuntu

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

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

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

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

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

react 组件：Suspense

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

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

2024-4-5修改vscode的代理

今天在vs code 上面配置go环境的时候出现了以下的报错&#xff1a; 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一样有三个参数&#xff0c;分别是x:y:z&#xff0c;代表的含义分别为左边界&#xff0c;右边界&#xff08;注意该范围是左闭右开的&#xff0c;也就是说取不到右值&#xff09;和步长。 1. 切片是从左往右还是从右往左&#xff0c;看的是步长的正负&#xff0c;如果步…...

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

C++ 的内存安全与效率

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

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

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

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

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

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

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

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

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

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

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

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

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…...

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

详解Qt添加外部库

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

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

深入理解JVM垃圾收集器

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

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

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

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

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

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

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

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

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

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

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/2/6 6:02:51

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

编程新知 2026/1/29 2:22:39

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2026/2/4 5:32:18

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2026/2/4 19:11:52

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/11/30 0:06:07

CMS内容管理系统的设计与实现：多站点模式的实现

在一套内容管理系统中&#xff0c;其实有很多站点&#xff0c;比如企业门户网站&#xff0c;产品手册&#xff0c;知识帮助手册等&#xff0c;因此会需要多个站点&#xff0c;甚至PC、mobile、ipad各有一个站点。 每个站点关联的有站点所在目录及所属的域名。 一、站点表设计…...

编程新知 2026/2/7 17:40:28