canvas通过三角函数中获得圆上某点的坐标

canvas通过三角函数中获得圆上某点的坐标

月光魔力鸭

2018-09-25 17:15 阅读 1521 喜欢 2 获得圆上的坐标 canvas 三角函数

在我们通过canvs画图的时候经常会用到圆,且需要计算出圆上某点的坐标,由于我数学没学好,总是记不得怎么获取,这里记录下,加深记忆。

这里面用到了我们以前学过的三角函数,可以通过三角函数来计算圆上的位置。

如下:在直角坐标系中圆点O(0,0) ,半径为OP,求圆上点P的坐标x,y.

直角坐标系

我们可以通过sinθ = y/r . cosθ = x/r 两个公式来分别获得坐标x和y.

那么 x = cosθ * r,然后对于角度的计算则是 θ = Math.PI * 2 / 360 * 度数(0-360),那么可以得到

下面,我们根据这个公式来画一个圆,以圆上的点为圆心画多个小圆。 如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas练习</title>
    <style type="text/css">
        html,body{width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;}
        canvas{background-color:#49e;}
    </style>
</head>
<body></body>
</html>
<script type="text/javascript">
    var canvas = {
        init () {
            this.ele = document.createElement('canvas');
            document.body.appendChild(this.ele);
            this.ctx = this.ele.getContext('2d');
            this.width = this.ele.width = window.innerWidth;
            this.height = this.ele.height = window.innerHeight;
            return this;
        },
        //画圆与小圆
        draw (){
            let r = 150,//半径50
                lr = 5;//小圆半径
            this.ctx.strokeStyle = 'white';
            this.ctx.arc(this.width/2,this.height/2,r,0,Math.PI * 2);
            this.ctx.stroke();
            //画小圆,i 为度数,共有360°
            for(let i=0;i<=360;i+= 30){
                //获得圆上坐标
                this.ctx.beginPath();
                let x= Math.cos(Math.PI * 2 / 360 * i) * r,
                    y = Math.sin(Math.PI * 2 / 360 * i) * r;
                this.ctx.arc(this.width/2+x,this.height/2 + y,lr,0,Math.PI * 2);
                this.ctx.stroke();
                this.ctx.closePath();
            }
        }
    };
    canvas.init().draw();
</script>

噔噔噔噔,效果出来啦..虽然很简单,但是初学的时候总是有莫名的成就感.. 哈哈

效果图

三角函数还有很多用途,可以用在动画效果上,后面学习中...。


以上知识比较基础,大神请轻拍!

转载请注明出处: https://chrunlee.cn/article/canvas-get-circle-position.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
错误:The operation is insecure . 在使用canvas的 toDataUrl的时候报错,看了很多资料,基本上都说是设置跨域,但是我一直都有的啊。其实,只是顺序错了,setAttribute('crossOrigin','Anonymous') 要在设置 src之前设置。
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
关于jquery,他的核心特点就是无new构造和链式调用,这里根据网上的资料,自己简单理解下,有助于消化核心代码。
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
我们有时候会拿textarea来做编辑器,但是常用编辑器都是支持tab缩进的,这里对textarea监听下事件处理下即可实现。
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。