百度T7 课程 canvas 学习 弧度和角度基本知识
程序员文章站
2022-05-21 13:49:17
...
从这节开始,我们就要补充一些知识了
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:
行吧,曲线就出来了,别管咋出来的,反正出来了,而圆形,别的图形,就是这么出来的!
上一篇: 百度T7 课程 根据数据画饼图
下一篇: mysql的排序问题