HTML5 Canvas弧线教程

JSON 2024-04-22 16:15:51 184

弧度是角度测量的标准单位,用于许多数学领域。角度的弧度测量值在数值上等于单位圆相应弧的长度,因此 1 弧度略低于 57.3 度(当弧长等于半径时)。弧度由符号 rad 表示,另一个符号是上标字母 c,下面sojson给大家详细介绍。

绘制圆弧

您可以使用 arc() 方法在画布上绘制圆弧。在详细介绍绘制圆弧之前,先简要概述一下弧度和角度:

弧度是角度测量的标准单位,用于许多数学领域。角度的弧度测量值在数值上等于单位圆相应弧的长度,因此 1 弧度略低于 57.3 度(当弧长等于半径时)。弧度由符号 rad 表示,另一个符号是上标字母 c。例如,1.3 弧度的值可以写为 1.3 rad 或 1.3 c。见下图:


使用以下公式将度数转换为弧度:

var radians = degrees * Math.PI/180

arc 方法:arc(x, y, 半径, startAngle, endAngle, 方向)


参数类型描述

X

数字x 坐标(以像素为单位),相对于画布矩形左上角的圆弧中心点。
y数字相对于画布矩形左上角的圆弧中心点的 y 坐标(以像素为单位)。
半径数字圆弧路径所遵循的距点 (x,y) 的半径或距离。
起始角度数字起始角度,以弧度为单位,顺时针方向,0 对应于圆右侧的 3:00 点钟位置。
结束角数字结束角度,以弧度为单位。
方向布尔值true :从开始到结束以逆时针方向绘制圆弧。
false :从开始到结束以顺时针方向绘制圆弧

示例:使用 arc() 方法的 HTML5 Canvas 弧线

以下 Web 文档创建了一个简单的弧线。

输出 :


代码:

<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title></head>
<body>
<canvas id="demoCanvas" width="340" height="340"> canvas</canvas> 
<script>
var canvas = document.getElementById('demoCanvas');
var ctx = canvas.getContext('2d');
var x = 90;
var y = 100;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = 'green';
ctx.stroke();
</script>
</body> 
</html>

示例:HTML5 Canvas 杂项弧线

以下 Web 文档创建各种类型的弧。

输出 :


代码 :

<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title>
<script type="text/javascript">  
function misc_curves()
 {
    var canvas = document.getElementById("Mycanvas");
    if (canvas.getContext) 
	 {
	   var context = canvas.getContext("2d");
	     for (var i = 0; i < 2; i++)                            
		 // Step through two rows.
		  {
		 // Step through three versions.        
		 for (var j = 0; j < 3; j++)                        
	       {
		     context.beginPath();
			// The x-coordinate.
			 var x = 35 + j * 50;  
		    // The y-coordinate.    
			 var y = 35 + i * 50;            
		   // The arc radius.    
		     var radius = 20;  
	       // The starting point on the circle.    
		     var startAngle = 0;                     
	      //end point on the circle.    
		     var endAngle = Math.PI + (Math.PI * j) / 2; 
	      // The direction of drawing.    
		     var anticlockwise = i % 2 === 0 ? false : true; 
		  // Create the arc path.   
		    context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
	     // Show the arcs
		    context.stroke();                               
        }
		 }  
     }
}
</script>  
</head>
<body onload="misc_curves();">
<canvas id="Mycanvas" width="340" height="340"> canvas</canvas> 
</body> 
</html>

画圆圈

弧是圆的一部分。要绘制圆,请绘制起始角为 0、结束角为 2 x Pi 的圆弧。这是一个例子:

输出 :


<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title></head>
<body>
<canvas id="demoCanvas" width="340" height="340"> canvas</canvas> 
<script>
var canvas = document.getElementById('demoCanvas');
var ctx = canvas.getContext('2d');
var x = 90;
var y = 100;
var radius = 75;
var startAngle = 0;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>
</body> 
</html>

版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/525.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
js html5 canvas制作多个小球碰撞的动画效果
sojson 特效,本站页面“线条”HTML5实现讲解、特效代码下载
SOJSON动态云端加载,HTML5页面源码(下载),SOJSON特效
解决IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法,解决后支持HTML5
Freemarker 教程,Freemarker 压缩HTML成一行
Shiro教程(三)Shiro web.xml中Filter配置,配置注意事项
HTML和JSON如何互转
怎么加密html网页代码
HTML meta标签总结与属性使用介绍
Java web.xml 配置技巧—动态欢迎页地址
最新文章
Linux I/O重定向 296
Ruby 循环 - while、for、until、break、redo 和 retry 289
Node.js:全局对象 243
如何使用终端检查Linux上的内存使用情况 253
JavaScript对象详细剖析 133
Python print() 函数 220
PHP if/else/elseif 语句 193
HTML5 Canvas弧线教程 184
Java赋值运算符 239
XML内部实体和外部实体 293
最热文章
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 684486
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 674918
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 605786
免费天气API,天气JSON API,不限次数获取十五天的天气预报 594495
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 554321
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 509756
Elasticsearch教程(四) elasticsearch head 插件安装和使用 480503
Jackson 美化输出JSON,优雅的输出JSON数据,格式化输出JSON数据... ... 266613
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 244463
Elasticsearch教程(一),全程直播(小白级别) 226139
支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...