<!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. 36 有n个整数,使其前面各数顺序向后移n个位置,最后m个数变成最前面的m个数

    题目:有n个整数,使其前面各数顺序向后移n个位置,最后m个数变成最前面的m个数 public class _036ExchangeSite { public static void main(Stri ...

  2. javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  3. zrender源码分析2--初始化Storage

    接上次分析到初始化ZRender的源码,这次关注内容仓库Storage的初始化 入口1:new Storage(); // zrender.js /** * ZRender接口类,对外可用的所有接口都 ...

  4. Ubuntu重复循环启动的快速解决方法

    如果因为在配置java或者adb环境变量时修改profile文件导致的在登录界面输入密码后重复循环启动的问题,下面总结网上和实践找到快速解决的方法啦! 1.在登录界面按下ctrl+alt+F1进入命令 ...

  5. Ado.NET SqlDataReader详解

    ado.net的数据提供程序有三个分别是SqlServer数据提供程序,OLE DB提供程序,ODBC提供程序. 本次记录的是SqlServer提供程序中的一些知识点. ①SqlDataReader必 ...

  6. Windowsform datagridview选中向父窗口传值

    Datagridview mouseclick事件 private void dataGridView1_MouseClick(object sender, MouseEventArgs e) { i ...

  7. C#中IO操作

    using sysytem.Io; File.Exists() 检查文件是否存在, Directory.Exists() 检查文件夹是否存在 FileInfo DirectoryInfo 可实例化 对 ...

  8. 微软 eshop 数据存储之sqlserver

    微软的eshop项目写的很牛,学起来也比较吃力,最近公司刚好有一本书,说的就是.NET微服务,记下来. 因为微软对性能的要求,docker里面要有内存要求 安装dokcer,拉镜象 : docker ...

  9. 《Beginning Java 7》 - 8 - Collecting Garbage 垃圾回收

    Java 垃圾回收机制原理: Java 语言使用 garbage collector 来进行垃圾回收.它是允许在后台的代码,间或地检查没有引用的对象(unreferenced object).发现后, ...

  10. OI网络流 简单学习笔记

    持续更新! 基本上只是整理了一下框架,具体的学习给出了个人认为比较好的博客的链接. ..怎么说呢,最基础的模板我就我不说了吧qwq,具体可以参考一下这位大佬写的博客:最大流,最小割,费用流 费用流 跑 ...