【Canvas技法】图解绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise)

本文主要是介绍【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>arc函数辨析</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="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(-242,-204);ctx.lineTo(-250,-200);ctx.lineTo(-242,-196);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(-454,-8);ctx.lineTo(-450,0);ctx.lineTo(-446,-8);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(-254,196);ctx.lineTo(-250,200);ctx.lineTo(-254,204);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(-46,8);ctx.lineTo(-50,0);ctx.lineTo(-54,8);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(258,196);ctx.lineTo(250,200);ctx.lineTo(258,204);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(54,8);ctx.lineTo(50,0);ctx.lineTo(46,8);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(242,-196);ctx.lineTo(250,-200);ctx.lineTo(242,-204);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(446,-8);ctx.lineTo(450,0);ctx.lineTo(454,-8);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)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/876442

相关文章

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

SpringBoot整合jasypt实现重要数据加密

《SpringBoot整合jasypt实现重要数据加密》Jasypt是一个专注于简化Java加密操作的开源工具,:本文主要介绍详细介绍了如何使用jasypt实现重要数据加密,感兴趣的小伙伴可... 目录jasypt简介 jasypt的优点SpringBoot使用jasypt创建mapper接口配置文件加密

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

kotlin的函数forEach示例详解

《kotlin的函数forEach示例详解》在Kotlin中,forEach是一个高阶函数,用于遍历集合中的每个元素并对其执行指定的操作,它的核心特点是简洁、函数式,适用于需要遍历集合且无需返回值的场... 目录一、基本用法1️⃣ 遍历集合2️⃣ 遍历数组3️⃣ 遍历 Map二、与 for 循环的区别三、高

C语言字符函数和字符串函数示例详解

《C语言字符函数和字符串函数示例详解》本文详细介绍了C语言中字符分类函数、字符转换函数及字符串操作函数的使用方法,并通过示例代码展示了如何实现这些功能,通过这些内容,读者可以深入理解并掌握C语言中的字... 目录一、字符分类函数二、字符转换函数三、strlen的使用和模拟实现3.1strlen函数3.2st

MySQL中COALESCE函数示例详解

《MySQL中COALESCE函数示例详解》COALESCE是一个功能强大且常用的SQL函数,主要用来处理NULL值和实现灵活的值选择策略,能够使查询逻辑更清晰、简洁,:本文主要介绍MySQL中C... 目录语法示例1. 替换 NULL 值2. 用于字段默认值3. 多列优先级4. 结合聚合函数注意事项总结C

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

MySQL 日期时间格式化函数 DATE_FORMAT() 的使用示例详解

《MySQL日期时间格式化函数DATE_FORMAT()的使用示例详解》`DATE_FORMAT()`是MySQL中用于格式化日期时间的函数,本文详细介绍了其语法、格式化字符串的含义以及常见日期... 目录一、DATE_FORMAT()语法二、格式化字符串详解三、常见日期时间格式组合四、业务场景五、总结一、