欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

百度T7 课程 canvas 学习 弧度和角度基本知识

程序员文章站 2022-05-21 13:49:17
...

从这节开始,我们就要补充一些知识了

1

首先是角度,这个概念比较简单,就是 以前学习的三角函数中的角度,直角= 90 度

弧度的概念是,弧度是圆的一部分: 

百度T7 课程 canvas 学习 弧度和角度基本知识

可以看到上面的图中, 半径和 圆的周长的一部分 相同,那个角度就是1 弧度

上面 半径为x ,截取 圆的周长的一部分也为x ,则,对应的夹角就是1 弧度

那么问题来了,一个圆有多少度呢? 

答案: 360 度

那一个圆有多少弧度呢?

答案: 是 2* π* r / r = 周长/半径 = 2* π  那么多弧度

所以 2π   = 360 

所以呢: 1 角度= Math.PI/180

为啥要将这个,因为,画圆弧就得用到弧度的概念!

2

曲线的绘制

线是点构成的!

// y = 2x;
			window.onload = function(){
					var c1 = document.getElementById('c1')
					var ctx = c1.getContext('2d')
					var canvasWidth = ctx.canvas.width;
					var canvasHeigh = ctx.canvas.height;

					ctx.moveTo(0,0)
					for(let i =1;i<canvasWidth;i++){
						ctx.lineTo(i,i*2)						
					}
					ctx.strokeStyle="red"
					ctx.stroke()
					
				}

	</script>

show:

百度T7 课程 canvas 学习 弧度和角度基本知识

稍微变化线,看咋变成曲线:

// y = 2x;
			window.onload = function(){
					var c1 = document.getElementById('c1')
					var ctx = c1.getContext('2d')
					var canvasWidth = ctx.canvas.width;
					var canvasHeigh = ctx.canvas.height;

					ctx.moveTo(0,0)
					for(let i =1;i<canvasWidth;i++){
						ctx.lineTo(i+10,Math.pow((i-100),2) + 10	);					
					}
					ctx.strokeStyle="red"
					ctx.stroke()
					
				}

 

show:

百度T7 课程 canvas 学习 弧度和角度基本知识

 

行吧,曲线就出来了,别管咋出来的,反正出来了,而圆形,别的图形,就是这么出来的!