【Canvas与技法】椭圆画法
【成图】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>椭圆的画法 Draft2</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body onload="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas></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){//sleep(100);window.requestAnimationFrame(animate); }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){ }// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 }// 画前景this.paintFg=function(ctx){// 底色ctx.save();ctx.fillStyle = "white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();const R=256;//基准尺寸const STEP=R/2;ctx.lineWidth=2;// 中一var a=createPt(0,-STEP); ctx.fillStyle="RGB(215,204,182)";ctx.strokeStyle="RGB(104,20,20)"; ctx.beginPath();ctx.ellipse(a.x, a.y, 100, 60, 0, 0, 2*Math.PI,false);ctx.closePath();ctx.fill(); ctx.stroke();writeText(ctx,a.x,a.y+STEP*0.08,"完整椭圆","18px consolas","black");// 中二var a=createPt(0,0); ctx.fillStyle="RGB(215,204,182)";ctx.beginPath();ctx.ellipse(a.x, a.y, 100, 60, 0, 0, Math.PI,false);ctx.closePath();ctx.fill(); ctx.strokeStyle="RGB(104,20,20)";ctx.beginPath();ctx.ellipse(a.x, a.y, 100, 60, 0, Math.PI, Math.PI*2,false);ctx.stroke(); writeText(ctx,a.x,a.y+STEP*0.08,"半分椭圆","18px consolas","black");// 中三var a=createPt(0,STEP); ctx.strokeStyle="RGB(215,204,182)";ctx.beginPath();ctx.ellipse(a.x, a.y, 100, 60, 0, -Math.PI/4, Math.PI/4,false);ctx.stroke(); ctx.strokeStyle="RGB(104,20,20)";ctx.beginPath();ctx.ellipse(a.x, a.y, 100, 60, 0, Math.PI/4, Math.PI/4*3,false);ctx.stroke(); ctx.fillStyle="RGB(215,204,182)";ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.ellipse(a.x, a.y, 100, 60, 0, Math.PI/4*3, Math.PI/4*5,false);ctx.closePath();ctx.fill();ctx.fillStyle="RGB(104,20,20)";ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.ellipse(a.x, a.y, 100, 60, 0, Math.PI/4*5, -Math.PI/4,false);ctx.closePath();ctx.fill(); writeText(ctx,a.x,a.y+STEP*0.08,"四分椭圆","18px consolas","black");writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){ctx.fillStyle=style;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {const date = Date.now();let currDate = null;while (currDate - date < milliSeconds) {currDate = Date.now();}
}/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){ctx.save();ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
归根到底，这个世界是专门为你而造的你存在，世界就活着；
你幸福，世界就亮了；
你沮丧，世界就陷入灰暗；
你仁慈，世界就对一切宽容；
你恨，世界就恶毒；
你放弃，世界就毁灭了；
世界上最重要的人是你，
请不要放弃。
--------------------------------------------------------------*/
//-->
</script>END
相关文章：
【Canvas与技法】椭圆画法
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>椭圆的画法 Draft2</title><style type"text/css&quo…...
多核CPU调度是咋搞的？
其实很多情况下都有 这样的疑问 为什么多核CPU用着用着会“躺平”？ 为什么手机有 8 核，跑分时性能却不是核心数的翻倍？ 答案的钥匙，就藏在多核CPU的调度机制里。 为了更直观地理解，以一个《王者荣耀》游戏服务器为例…...
【Jenkins】pipeline 的基础语法以及快速构建一个 jenkinsfile
Jenkins Pipeline 是 Jenkins 中的一个强大功能，可以帮助你实现自动化构建、测试、部署等流程。Jenkins Pipeline 使用一种名为 Pipeline DSL（Domain Specific Language）的脚本语言，通常以 Jenkinsfile 形式存在，用于定…...
工作中如何提高技术实力？
点击“硬核王同学”，选择“关注/三连” 福利干货第一时间送达 大家好，我是硬核王同学。 其实这个问题困扰了我很久啊，不知道你们有没有跟我一样。 如何在工作中如何提高技术实力？ 随着时间的增加，越来越觉得工作上…...
画图，matlab，
clear;close all;clc;tic;dirOutput dir(*.dat); % 罗列所有后缀-1.dat的文件列表，罗列BDDATA的数据 filenames string({dirOutput.name}); % 提取文件名%% 丢包统计 FILENAMES [""]; LOSS_YTJ [ ]; LOSS_RAD [ ]; LOSS_ETH [ ]…...
Java虚拟机类加载(解析阶段)[虚方法表的生成以及其存在意义]
class字节码文件中的常量池结构详解-CSDN博客Java虚拟机类加载(解析阶段)-CSDN博客...
电子元器件与电路之-MOS管的介绍和作用
一、基本概念 MOS 管，或MOSFET，全称是Metal-Oxide-Semiconductor Field-Effect Transistor（金属 - 氧化物 - 半导体场效应晶体管）。和三极管利用电流控制电流不同，它是一种利用电场效应来控制电流的半导体器件。和三级…...
python实现word转html
目录 使用mammoth库 使用spire.doc库 使用mammoth库 mammoth库支持将word转为HTML和markdown格式的文件。 import mammothdef word_html(word_file):html_save_name fr{word_file.split(.)[0]}.htmlwith open(word_file, rb) as f:data mammoth.convert_to_html(f)with o…...
nginx模块ngx-fancyindex 隐藏标题中的 / 和遇到的坑
首先下载nginx源码，编译时加上 --add-module/usr/local/src/ngx-fancyindex/ 例如 ： ./configure --prefix/usr/local/nginx --with-select_module --with-poll_module --with-threads --with-file-aio --with-http_ssl_module --with-http_v2_module…...
第二十四天 循环神经网络（RNN）LSTM与GRU
LSTM（长短期记忆网络）和GRU（门控循环单元）是两种流行的循环神经网络变体，它们被设计来解决传统RNN在处理长序列数据时遇到的梯度消失和梯度爆炸问题。这两种网络都通过引入门控机制来控制信息的流动，从而能…...
RocketMQ如何保证消息顺序?
大家好，我是锋哥。今天分享关于【RocketMQ如何保证消息顺序?】面试题。希望对大家有帮助； RocketMQ如何保证消息顺序? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RocketMQ 作为一个分布式消息中间件，提供了高吞吐、低延迟的…...
LabVIEW实现GSM/GPRS通信
目录 1、GSM/GPRS通信原理 2、硬件环境部署 3、程序架构 4、前面板设计 5、程序框图设计 6、测试验证 本专栏以LabVIEW为开发平台，讲解物联网通信组网原理与开发方法，覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例，展示如何利用LabVIEW和常用模块实现物联…...
关于如何做技术文档
在技术的浩瀚海洋中，一份优秀的技术文档宛如精准的航海图。它是知识传承的载体，是团队协作的桥梁，更是产品成功的幕后英雄。然而，打造这样一份出色的技术文档并非易事。你是否在为如何清晰阐释复杂技术而苦恼？是否纠结…...
基于多尺度动态卷积的图像分类
✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢，在这里我会分享我的知识和经验。&am…...
RK3576 介绍
RK3576 介绍 1 介绍1.1 概述1.2 RK3576、RK3588、RK3568 和 RK3399 的参数对比 2 DataSheet2.1 RK35762.2 RK35882.3 RK35682.4 RK3399 参考 1 介绍 1.1 概述 ARM 64位高性能八核通用处理器，丰富的PCIE/USB3.0/SATA/GMAC等各类高速及CAN FD/DSMC/UART/SPI/I2C/I3C…...
如何评估并持续优化AI呼出机器人的使用效果
如何评估并持续优化AI呼出机器人的使用效果 作者：开源呼叫中心FreeIPCC 随着人工智能技术的发展，AI呼出机器人在企业中的应用越来越广泛。这些智能系统不仅提高了工作效率、降低了成本，还改善了客户体验。然而，要确保AI呼出机器…...
Ubuntu上如何部署Nginx？
环境： Unbuntu 22.04 问题描述： Ubuntu上如何部署Nginx？ 解决方案： 在Ubuntu上部署Nginx是一个相对简单的过程，以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…...
制造业4.0：AI与机器人如何重塑生产线
引言：从传统到未来的转型 在轰鸣的生产线上，传统制造业曾以规模化生产和成本效益为核心竞争力，推动了全球工业化进程。然而，面对现代市场的多样化需求和激烈竞争，这种模式正暴露出越来越多的局限性：产能过剩…...
ChatGPT与领域特定语言的集成
用ChatGPT做软件测试 领域特定语言（Domain-Specific Language，DSL）是一种编程语言，专门设计用于满足特定领域或问题领域的需求。它是一种定制的语言，通常包括特定领域的专业术语以及相应的语法规则。DSL的设计旨在让领…...
【记录50】uniapp安装uview插件，样式引入失败分析及解决
SassError: Undefined variable: "$u-border-color". 表示样式变量$u-border-color没定义，实际是定义的 首先确保安装了scss/sass 其次，根目录下 app.vue中是否全局引入 <style lang"scss">import /uni_modules/uview-ui/in…...
TwinCAT3进阶指南：台达A2伺服扭矩读取与回零实战
1. TwinCAT3与台达A2伺服的基础配置 在开始扭矩读取和回零操作之前，我们需要先完成TwinCAT3与台达A2伺服的基础配置。这部分工作看似简单，但却是后续所有高级功能的基础。我遇到过不少开发者因为基础配置没做好，导致后面各种奇怪的问题。 首先…...
SSDTTime实战指南：从入门到精通的ACPI补丁工具应用
SSDTTime实战指南：从入门到精通的ACPI补丁工具应用 【免费下载链接】SSDTTime SSDT/DSDT hotpatch attempts. 项目地址: https://gitcode.com/gh_mirrors/ss/SSDTTime ACPI补丁工具SSDTTime是一款跨平台的开源解决方案，专为简化硬件兼容性补丁创建…...
告别手动画图？聊聊Autoware高精地图那些事：开源工具、格式转换与未来展望
自动驾驶高精地图技术全景：从Autoware工具链到行业实践 当我们在谈论自动驾驶时，"高精地图"始终是绕不开的核心技术支柱。与普通导航地图不同，高精地图需要厘米级精度、丰富的语义信息以及实时更新能力。作为自动驾驶开源生态中的重…...
ABAQUS UMAT子程序实现应变梯度塑性理论模拟损伤和断裂的分析 (包含的文件如图所示，p...
ABAQUS UMAT子程序实现应变梯度塑性理论模拟损伤和断裂的分析 (包含的文件如图所示，pdf详细介绍子程序的内容，公式等)在金属材料的断裂分析中，传统本构模型经常遇到网格敏感性问题。五年前我第一次尝试用应变梯度理论解决这个问题时ÿ…...
STM32G473 IAP实战：基于CAN/USART双通道的BootLoader设计与固件升级全流程解析
1. 为什么需要双通道IAP方案 在工业现场设备维护中，固件升级是个高频刚需。想象一下车间里有上百台设备需要更新程序，如果每台都要拆机接下载器，工程师怕是会当场崩溃。我去年参与的一个AGV调度项目就吃过这个亏，后来我们给STM32…...
RMBG-2.0异常处理指南：解决常见部署与运行问题
RMBG-2.0异常处理指南：解决常见部署与运行问题 抠图工具用得好好的，突然给你来个报错，或者生成的结果莫名其妙，是不是特别让人头疼？尤其是像RMBG-2.0这样效果出色的工具，一旦出问题，很多人就不…...
如何高效获取Twitter社交数据：学术研究的实战指南
如何高效获取Twitter社交数据：学术研究的实战指南 【免费下载链接】getting-started-with-the-twitter-api-v2-for-academic-research A course on getting started with the Twitter API v2 for academic research 项目地址: https://gitcode.com/gh_mirrors/ge/…...
FFTW实战指南：从编译优化到音频信号处理
1. FFTW库简介与核心优势 FFTW（Fastest Fourier Transform in the West）是当前公认性能最优异的快速傅里叶变换开源库，其名称直译为"西方最快的傅里叶变换"。我在音频信号处理项目中首次接触这个库时，就被它惊人的运算…...
告别论文格式内耗！从标题层级到参考文献，这款工具一键搞定全流程合规排版
在学位论文撰写中，标题层级混乱、页眉页脚错位、参考文献格式不统一、图表排版杂乱是贯穿全文的高频痛点，堪称学术写作的 “格式重灾区”。传统 Word/WPS 依赖手动刷样式、调格式，耗时数小时还易反复出错；LaTeX 门槛高、中文适配差…...
BilibiliCommentScraper：革新性全量数据采集的技术突破方案
BilibiliCommentScraper：革新性全量数据采集的技术突破方案 【免费下载链接】BilibiliCommentScraper 项目地址: https://gitcode.com/gh_mirrors/bi/BilibiliCommentScraper 在当今数据驱动决策的时代，高效采集方案与完整数据获取已成为内容分析…...