<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id='cvs' width='800' height='800' style='border:1px dotted blue'></canvas>

    <script>

        var cvs = document.getElementById('cvs');

        var ctx = cvs.getContext('2d');

        ctx.moveTo(0,400);

        ctx.lineTo(800,400);

        ctx.stroke();

        ctx.moveTo(400,0);

        ctx.lineTo(400,800);

        ctx.stroke();

        ctx.moveTo(400,400);

        // ctx.close();

        ctx.arc(400,400,20,0,2*Math.PI);

        ctx.stroke();

        ctx.arc(400,400,200,0,2*Math.PI);

        ctx.stroke();

        var deg = 0;// 角度

        var rad = (deg/360)*2*Math.PI;// 角度

        var R = 200; // 大圆半径

        var r = 20; // 小圆半径

        var a = 400; // 中心圆心

        var b = 400; // 中心圆心

        for(var i = 0; i < 360 / 30; i++)

        {

            deg = 0+30*i; // 30为小圆相对于大圆偏移的角度

            rad = (deg/360)*2*Math.PI;// 角度

            y = a+Math.cos(rad)*R; // 当前时刻的小圆坐标y

            x = b+Math.sin(rad)*R; // 当前时刻的小圆坐标x

            ctx.moveTo(x,y); // 移动到小圆圆心

            ctx.beginPath(); // 开始记录路径

            ctx.arc(x,y,r,0,2*Math.PI); // 绘制小圆

            ctx.closePath(); // 结束记录路径 提笔

            ctx.stroke(); // 开始绘制保存路径

            ctx.beginPath(); // 开始记录路径

            ctx.moveTo(x,y); // 移动到当前小圆圆心

            ctx.lineTo(a,b); // 画线到中心圆心 辐射线

            ctx.closePath(); // 结束记录路径 提笔

            ctx.stroke(); // 开始绘制保存路径

            if(i == 1){

                ctx.strokeStyle = 'red';

                ctx.beginPath(); // 开始记录路径

                ctx.moveTo(x,y); // 移动到当前小圆圆心

                ctx.lineTo(a,y); // 画垂线

                ctx.lineTo(a,b); // 画横坐标

                ctx.closePath(); // 结束记录路径 提笔

                ctx.stroke(); // 开始绘制保存路径

                ctx.beginPath(); // 开始记录路径

                ctx.moveTo(x,y); // 移动到当前小圆圆心

                ctx.lineTo(x,b); // 画垂线

                ctx.lineTo(a,b); // 画纵坐标

                ctx.closePath(); // 结束记录路径 提笔

                ctx.stroke(); // 开始绘制保存路径

                ctx.strokeStyle = 'green';

                ctx.beginPath();

                ctx.moveTo(a,b);

                ctx.arc(a,b,2*r,2*rad,3*rad);

                ctx.closePath();

                ctx.stroke();

                ctx.font = '30px Arial';

                ctx.fillText('A',a+5,b+r+50);

                ctx.font = '20px Arial';

                ctx.fillText('R*sin(A)',(x-90),y-10);

                ctx.font = '20px Arial';

                ctx.fillText('R*cos(A)',(x-10),y-50);

                ctx.strokeStyle = 'black';

            }

        }

    </script>

</body>

</html>

Canvas 同心圆旋转示例解析的更多相关文章

  1. canvas基础动画示例

    canvas基础动画示例 本文主要用最简单的例子,展示canvas动画效果是如何实现的 动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...

  2. xml scheme 示例解析

    第一个示例解析 第二个示例解析

  3. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. FAT32文件格式示例解析

    1.前言 本文主要以一个示例来分析FAT32文件系统的格式,对FAT32文件系统的各个区域详细分析. 2.FAT32文件系统典型分区 3.FAT32文件系统示例 按如下步骤在ubuntu下创建FAT3 ...

  5. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

  6. PHP 使用header函数设置HTTP头的示例解析 表头

    PHP 使用header函数设置HTTP头的示例解析 表头 //定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header ...

  7. 【腾讯Bugly干货分享】WebVR如此近-three.js的WebVR示例解析

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff1689a6c9121b1adb16 作者:苏晏烨 关于WebVR 最 ...

  8. 『Python Kivy』官方乒乓球游戏示例解析

    本篇文章用于对Kivy框架官方所给出的一个「乒乓球」小游戏的源码进行简单地解析.我会尽可能的将方方面面的内容都说清楚.在文章的最下方为官方所给出的这个小游戏的教程以及游戏源码. 由于篇幅所限,本文只简 ...

  9. Android 图表绘制 achartengine 示例解析

    一. AChartEngine 简介 1. 项目地址 AChartEngine 简介 : AChartEngine 是 Android 平台的图表开发库, 能绘制 折线图, 饼图, 气泡图, 柱状图, ...

随机推荐

  1. hdu 1686 KMP算法

    题意: 求子串w在T中出现的次数. kmp算法详解:http://www.cnblogs.com/XDJjy/p/3871045.html #include <iostream> #inc ...

  2. Python实现二叉树的遍历

    二叉树是有限个元素的集合,该集合或者为空.或者有一个称为根节点(root)的元素及两个互不相交的.分别被称为左子树和右子树的二叉树组成. 二叉树的每个结点至多只有二棵子树(不存在度大于2的结点),二叉 ...

  3. mongodb密码忘了怎么办

    自己电脑上mongodb好长时间没上了,密码竟然给忘了,悲剧啊! 修改auth为false,然后重新启动mongodb 这时候可以不用登陆直接进入 db.changeUserPassword('use ...

  4. 解决gitosis中authorized_keys不自动更新问题

    1.拷贝一个管理员权限用户的id_rsa.pub到服务器端 这里我拷贝的是yang电脑的key,命令如下: scp  /home/yang/.ssh/id_rsa.pub serveradmin@服务 ...

  5. System.Timers.Timer用法

    System.Timers.Timer t = new System.Timers.Timer(5000); //设置时间间隔为5秒 private void Form1_Load(object se ...

  6. solr&lucene3.6.0源码解析（一）

      本文作为系列的第一篇,主要描述的是solr3.6.0开发环境的搭建   首先我们需要从官方网站下载solr的相关文件,下载地址为http://archive.apache.org/dist/luc ...

  7. Intel Galileo development documentation

    Intel Galileo development Documentation Author:Liutianchen 1552227, Department of Computer Science,E ...

  8. Cntlm

    SourceForge页面 作用是转发请求到代理 可以同时加上域验证信息(为各种NTLM认证?) gradle.cmd.Terminal等工具或软件可能无法或者说没有使用系统/浏览器设置的代理,因为可 ...

  9. OLEDB方式操作oracle数据库

    OLEDB方式操作oracle数据库 一.查询语句: using (OleDbConnection conn = new OleDbConnection(System.Configuration.Co ...

  10. 网易对象存储NOS图床神器

    本文来自网易云社区 注:使用过程中有什么问题或建议欢迎到如下链接提交:http://note.youdao.com/noteshare?id=6321086fa4d7a6c003656354c1aa6 ...