【Canvas技法】图解绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise)
【一图释疑】
【绘制上图用代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>Html5/Canvas中绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise) 的具体用法图解。</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body onload="init();"><div class="centerlize"><canvas id="myCanvas" width="512px" height="512px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=1024;
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 = "24px consolas";ctx.fillStyle="black";ctx.fillText("arc(x,y,radius,start,end,true/false)",0,-220);//----------以下为左圆// 逆时针第一象限ctx.beginPath();ctx.arc(-250,0,200,0,-Math.PI/2,true);ctx.lineTo(-250,-200);ctx.lineTo(-234,-208);ctx.lineTo(-250,-200);ctx.lineTo(-234,-192);ctx.lineWidth=2;ctx.strokeStyle="blue";ctx.stroke();// 逆时针第二象限ctx.beginPath();ctx.arc(-250,0,200,-Math.PI/2,-Math.PI,true);ctx.lineTo(-450,0);ctx.lineTo(-458,-16);ctx.lineTo(-450,0);ctx.lineTo(-442,-16);ctx.lineWidth=2;ctx.strokeStyle="green";ctx.stroke();// 逆时针第三象限ctx.beginPath();ctx.arc(-250,0,200,-Math.PI,-Math.PI*3/2,true);ctx.lineTo(-250,200);ctx.lineTo(-262,192);ctx.lineTo(-250,200);ctx.lineTo(-262,208);ctx.lineWidth=2;ctx.strokeStyle="teal";ctx.stroke();// 逆时针第四象限ctx.beginPath();ctx.arc(-250,0,200,-Math.PI*3/2,-Math.PI*2,true);ctx.lineTo(-50,0);ctx.lineTo(-42,16);ctx.lineTo(-50,0);ctx.lineTo(-58,16);ctx.lineWidth=2;ctx.strokeStyle="navy";ctx.stroke();// 标注角度var arr=["-PI/2","-PI","-PI*3/2","-PI*2或0"];for(var i=0;i<arr.length;i++){var theta=-(i+1)*Math.PI/2;var x=150*Math.cos(theta);var y=150*Math.sin(theta);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "24px consolas";ctx.fillStyle="black";ctx.fillText(arr[i],x-260,y+5);}// 标注true=逆时针ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "48px consolas";ctx.fillStyle="blue";ctx.fillText("true",-250,-10);ctx.fillText("逆时针",-250,50);//----------- 以下为右边圆// 顺时针第四象限ctx.beginPath();ctx.arc(250,0,200,0,Math.PI/2,false);ctx.lineTo(250,200);ctx.lineTo(264,192);ctx.lineTo(250,200);ctx.lineTo(264,208);ctx.lineWidth=2;ctx.strokeStyle="red";ctx.stroke();// 顺时针第三象限ctx.beginPath();ctx.arc(250,0,200,Math.PI/2,Math.PI,false);ctx.lineTo(50,0);ctx.lineTo(58,16);ctx.lineTo(50,0);ctx.lineTo(42,16);ctx.lineWidth=2;ctx.strokeStyle="maroon";ctx.stroke();// 顺时针第二象限ctx.beginPath();ctx.arc(250,0,200,Math.PI,Math.PI*3/2,false);ctx.lineTo(250,-200);ctx.lineTo(234,-192);ctx.lineTo(250,-200);ctx.lineTo(234,-208);ctx.lineWidth=2;ctx.strokeStyle="purple";ctx.stroke();// 顺时针第一象限ctx.beginPath();ctx.arc(250,0,200,Math.PI*3/2,Math.PI*2,false);ctx.lineTo(450,0);ctx.lineTo(442,-16);ctx.lineTo(450,0);ctx.lineTo(458,-16);ctx.lineWidth=2;ctx.strokeStyle="fuchsia";ctx.stroke();// 标注角度var arr=["PI/2","PI","PI*3/2","PI*2或0"];for(var i=0;i<arr.length;i++){var theta=(i+1)*Math.PI/2;var x=150*Math.cos(theta);var y=150*Math.sin(theta);ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "24px consolas";ctx.fillStyle="black";ctx.fillText(arr[i],x+240,y+5);}// 标注true=逆时针ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "48px consolas";ctx.fillStyle="red";ctx.fillText("false",250,-10);ctx.fillText("顺时针",250,50);// 下标题ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "24px consolas";ctx.fillStyle="black";ctx.fillText("arc函数末参与起止角度的配合",0,220);ctx.font = "8px consolas";ctx.fillStyle="black";ctx.fillText("逆火原创",WIDTH/2-30,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){}
}/*---------------------------------------------
勿问成功的秘诀为何,且尽全力做你应该做的事吧。
成功的秘诀端赖坚毅的决心。
成功并非重要的事,重要的是努力。
成功是用努力,而非用希望造成。
不论成功或失败,皆存乎自己。
成功毫无技巧可言,我一向只对工作尽力而为而已。
----------------------------------------------*/
//-->
</script>
END
相关文章:
【Canvas技法】图解绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise)
【一图释疑】 【绘制上图用代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>Html5/Canvas中绘制圆弧的重要函数 arc(x,y,r,startA…...
vulhub中Apache Solr 远程命令执行漏洞复现(CVE-2019-0193)
Apache Solr 是一个开源的搜索服务器。Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现。此次漏洞出现在Apache Solr的DataImportHandler,该模块是一个可选但常用的模块,用于从数据库和其他源中提取数据。它具有一个功能&#…...
水泥5G智能制造工厂数字孪生可视化平台,推进水泥行业数字化转型
水泥5G智能制造工厂数字孪生可视化平台,推进水泥行业数字化转型。水泥5G智能制造工厂数字孪生可视化平台,是水泥行业数字化转型的关键推手。数字孪生平台运用先进的信息技术和数字化手段,实现水泥生产过程的数字化模拟、可视化监控和智能化管…...
vue 一个简单实例化Vue.js 是一个流行的前端框架,如何创建一个基本的计数器应用
当然可以!Vue.js 是一个流行的前端框架,用于构建用户界面。下面是一个简单的 Vue.js 例子,演示了如何创建一个基本的计数器应用。 首先,确保你已经在项目中引入了 Vue.js。你可以通过 CDN 引入 Vue.js,或者在项目中安…...
1.k8s架构
k8s集群架构 一个Kubernetes集群至少包含一个控制平面(control plane),以及一个或多个工作节点(worker node)。控制平面(Control Plane) : 控制平面负责管理工作节点和维护集群状态。所有任务分配都来自于控制平面。工作节点(Worker Node) : 工作节点负责执行由控制…...
【Linux】详解动态库链接和加载对可执行程序底层的理解
一、动静态库链接的几种情况 如果我们同时提供动态库和静态库,gcc默认使用的是动态库。如果我们非要使用静态库,要加-static选项。如果我们只提供静态库,那可执行程序没办法,只能对该库进行静态链接,但程序不一定整体…...
中文Mistral模型介绍(Chinese-Mistral)——中文大语言模型
中文Mistral简介 Chinese-Mistral由清华大学地学系地球空间信息科学实验室开发。 该模型基于Mistral发布的Mistral-7B-v0.1训练得到。首先进行中文词表扩充,然后采用实验室提出的PREPARED训练框架(under review)在中英双语语料上进行增量预训…...
yolo v5 中 letterbox对不规则矩形框的输入调整
在对数据或特征的处理中,为了避免输入图像或特征,经过resize等等操作,改变了目标特征的尺度信息,一般会引入一些操作,比如: 在特征维度,加入SPP(空间金字塔池化)&#x…...
STL是什么?如何理解STL?
文章目录 1. 什么是STL2. STL的版本3. STL的六大组件4. 如何学习STL5.STL的缺陷 1. 什么是STL STL(standard template libaray-标准模板库):是C标准库的重要组成部分,不仅是一个可复用的组件库,而且是一个包罗数据结构与算法的软件框架。 2. …...
【Spring篇】Spring IoC DI
个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【Spring系列】 本专栏旨在分享学习Spring MVC的一点学习心得,欢迎大家在评论区交流讨论💌 目录 前言一、IoC二、…...
Python语言例题集(010)
#!/usr/bin/python3 #在链表的末端插入新的节点。 class Node(): def init(self,dataNone): self.datadata self.nextNone class LinkedList(): def init(self): self.headNone def printList(self):ptrself.headwhile ptr:print(ptr.data)ptrptr.nextdef ending(self,newd…...
redis---主从复制
主从复制是指将一台redis服务器的数据复制到其他redis服务器,也叫主节点和从节点。 一个主节点可以有多个从节点。而每个从节点只能有一个主节点。数据的复制是单向的,只能由主节点到从节点。一般来说,主节点负责写操作,从节点负…...
搜索引擎-03-搜索引擎原理
拓展阅读 搜索引擎-01-概览 搜索引擎-02-分词与全文索引 搜索引擎-03-搜索引擎原理 Crawl htmlunit 模拟浏览器动态 js 爬虫入门使用简介 Crawl jsoup 爬虫使用 jsoup 无法抓取动态 js 生成的内容 Crawl WebMagic 爬虫入门使用简介 webmagic 全网搜索引擎架构与流程如何…...
mysql语句学习
SQL Select语句完整的执行顺序: 1、from子句组装来自不同数据源的数据; (先join在on) 2、where子句基于指定的条件对记录行进行筛选; 3、group by子句将数据划分为多个分组; 4、使用聚集函数进行计算&a…...
【Apache Doris】周FAQ集锦:第 1 期
【Apache Doris】周FAQ集锦:第 1 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目! 在这个栏目中,每周将筛选社区反馈的热门问题和话题,重点回答并进行深入探讨。旨在为广大用户和…...
Windows创建远程线程学习
CreateRemoteThread是一个Windows API函数,它能够创建一个在其它进程地址空间中运行的线程; 下面来简单做一下,配合procexp工具; VC代码如下,我是写到一个菜单单击处理函数中, void CCrrmthView::OnMenuitem32771() {// TODO: Add your command handler code hereHAN…...
使用c语言libexpat开源库解析XML数据
1 libexpat简介 Expat 是一个用 C 语言编写的开源 XML 解析库,以其高性能和小巧的体积著称。Expat 兼容多种操作系统平台,包括但不限于 Windows、Linux、macOS 等。由于其跨平台特性和简单易用的API,Expat 成为了许多C/C程序员解析XML文档的…...
51单片机入门_江协科技_19~20_OB记录的笔记
19. 串口通讯 19.1. 串口介绍: •串口是一种应用十分广泛的通讯接口,串口成本低、容易使用、通信线路简单,可实现两个设备的互相通信。 •单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信,极大的…...
基于k8s的高性能综合web服务器搭建
目录 基于k8s的高性能综合web服务器搭建 项目描述: 项目规划图: 项目环境: k8s, docker centos7.9 nginx prometheus grafana flask ansible Jenkins等 1.规划设计整个集群的架构,k8s单master的集群环境&…...
Folder Icons for Mac v1.8 激活版文件夹个性化图标修改软件
Folder Icons for Mac是一款Mac OS平台上的文件夹图标修改软件,同时也是一款非常有意思的系统美化软件。这款软件的主要功能是可以将Mac的默认文件夹图标更改为非常漂亮有趣的个性化图标。 软件下载:Folder Icons for Mac v1.8 激活版 以下是这款软件的一…...
Gitee上传私有仓库
个人记录 Gitee创建账号 以KS进销存系统为例,下载到本地电脑解压。 新建私有仓库 仓库名称:ks-vue3,选择‘私有’ 本地配置 下载安装git配置git 第一次配置可以在本地目录右键【Open Git Bash here】输入【Git 全局设置】再输入【创…...
HTMLCSSJS
HTML基本结构 <html><head><title>标题</title></head><body>页面内容</body> </html> html是一棵DOM树, html是根标签, head和body是兄弟标签, body包括内容相关, head包含对内容的编写相关, title 与标题有关.类似html这种…...
第14章 数据结构与集合源码
一 数据结构剖析 我们举一个形象的例子来理解数据结构的作用: 战场:程序运行所需的软件、硬件环境 战术和策略:数据结构 敌人:项目或模块的功能需求 指挥官:编写程序的程序员 士兵和装备:一行一行的代码 …...
分享react+three.js展示温湿度采集终端
前言 气象站将采集到的相关气象数据通过GPRS/3G/4G无线网络发送到气象站监测中心,摆脱了地理空间的限制。 前端:气象站主机将采集好的气象数据存储到本地,通过RS485等线路与GPRS/3G/4G无线设备相连。 通信:GPRS/3G/4G无线设备通…...
易宝OA ExecuteSqlForDataSet SQL注入漏洞复现
0x01 产品简介 易宝OA系统是一种专门为企业和机构的日常办公工作提供服务的综合性软件平台,具有信息管理、 流程管理 、知识管理(档案和业务管理)、协同办公等多种功能。 0x02 漏洞概述 易宝OA ExecuteSqlForDataSet接口处存在SQL注入漏洞,未经身份认证的攻击者可以通过…...
C++语言学习(二)——⭐缺省参数、函数重载、引用
1.⭐缺省参数 (1)缺省参数概念 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时,如果没有指定实参则采用该形参的缺省值,否则使用指定的实参。 void Func(int a 0) {cout<<a<<endl; } int…...
qt通过setProperty设置样式表笔记
在一个pushbutton里面嵌套两个label即可,左侧放置图片label,右侧放置文字label,就如上图所示; 但是这时的hover,press的伪状态是没有办法“传递”给里面的控件的,对btn的伪状态样式表的设置,是不…...
Sora文本生成视频(附免费的专属提示词)
sora-时髦女郎 bike_1 Sara-潮汐波浪 Sora是一个由OpenAI出品的文本生成视频工具,已官方发布了生成视频的样式,视频的提示词是:A时髦的女人走在充满温暖霓虹灯的东京街道上动画城市标牌。她穿着黑色皮夹克、红色长裙和黑色靴子,拎着黑色钱包。她穿着太阳镜和红色唇膏。她走…...
Flask Python:数据库多条件查询,flask中模型关联
前言 在上一篇Flask Python:模糊查询filter和filter_by,数据库多条件查询中,已经分享了几种常用的数据库操作,这次就来看看模型的关联关系是怎么定义的,先说基础的关联哈。在分享之前,先分享官方文档,点击查看 从文档…...
Spring Security 实现后台切换用户
Spring Security version 后端代码: /*** author Jerry* date 2024-03-28 17:47* spring security 切换账号*/RestController RequiredArgsConstructor RequestMapping("api/admin") public class AccountSwitchController {private final UserDetailsSe…...
沈阳营销网站制作企业/网上如何做广告
实验一 词法分析程序的设计与实现(C语言)一、实验目的通过C语言词法分析程序的实现理解编译程序过程中对单词的分析过程。二、实验重难点DFA自动机的数据结构表示,程序流程图,词法分析程序实现三、实验内容与要求实验内容…...
网站制作模板程序/中国法律服务网app最新下载
学习了Python的各种基础语法和常用包后,你是否对如何使用Python在实际工作中进行数据分析一头雾水?如果是,今天这篇文章一定能带给你一些用数据分析解决实际问题的思路。数据分析的目的决定了你的分析步骤,比如你的分析的目标是提…...
wordpress 多站点模式 帐号是通用的么/软文广告100字
一、源码特点 SSM选房管理系统是一套完善的完整医院类型系统,结合SSM(SpringSpringMVCMyBatis)框架和bootstrap完成本系统,对理解JSP java编程开发语言有帮助系统采用SSM框架(MVC模式开发),系…...
微商网站制作/搜索推广开户
增量填充 : 只调整自上次填充后添加、删除或修改的行的索引项 完全填充: 如果为全文目录请求完全填充,则为该目录所涉及的所有表中的所有行生成索引项。如果为表请求完全填充,则为该表中的所有行生成索引项。完全填充通常发生在当…...
建设网站大概要花多少钱/百度网盘网页版入口官网
1.应用场景 主要用于推荐一些架构师应该阅读的优秀书籍。 2.学习/操作 1.文档阅读 架构师必读书单 | “华仔,放学别走!” 第5期-极客时间 2.整理输出 原文 你好,我是华仔。 在专栏更新的时候,很多同学留言希望我推荐一些书籍可以…...
网站建设与规划方案书/站长平台工具
2015年3月28日,在人来人往的北京中关村创业大街上的极客咖啡,近百位过去8年和InfoQ中国一同成长的朋友齐聚一堂,共同庆祝InfoQ中国(微信号:infoqchina)的八周年生日。\u0026#xD;\u0026#xD;时间回到2006年&a…...