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

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

1

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

弧度的概念是，弧度是圆的一部分： 

可以看到上面的图中， 半径和 圆的周长的一部分 相同，那个角度就是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:

稍微变化线，看咋变成曲线：

// 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:

 

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