<!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 4068 I-number

    #include<stdio.h> #include<string.h> ]; int al; int mysum() //求各位和 { ; al=strlen(a); ; i ...

  2. 白盒测试实践项目（day6）

    胡俊辉负责JUint测试部分,了解JUint测试的方法,并对其他成员介绍JUint的使用,负责JUnit部分相关文档的编写,负责博客园博客的维护,负责小组成员的任务分类与管理. 李建文负责代码复审部分 ...

  3. C#6.0特性（快来围观）(转)

    出处:http://www.cnblogs.com/HJL-Blog/p/4457632.html 说明一下,很多博友一进来就认为仅仅是语法糖,C#语法的更新,代表着它的进步,语法糖是为了让我们更好的 ...

  4. dbcp的销毁

    使用commons-dbcp-1.2.2.jar的DataSource,发现每次动态编译后连接池中的连接不会释放,新的连接池建立有mssql多出一组连接,只有重新启动tomcat或weblogic才可 ...

  5. Qt资源整理ING

    QCustomPlot:图表库,开源, 链接地址http://www.qcustomplot.com/index.php/download 一些Qt的开发库:http://qt-project.org ...

  6. 引用的一道JAVA题目

    code: class A { A() {}} class B extends A { } Which two statements are true? (Choose two) A. Class B ...

  7. 使用word 2013 发布csdn博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  8. 编写高质量代码改善C#程序的157个建议——建议153：若抛出异常，则必须要注释

    建议153:若抛出异常,则必须要注释 有一种必须加注释的场景,即使异常.如果API抛出异常,则必须给出注释.调用者必须通过注释才能知道如何处理那些专有的异常.通常,即便良好的命名也不可能告诉我们方法会 ...

  9. Sweetkang 的机器学习实验室 (1)

    前言 近年来,Machine Learning 在许多领域上已然取得了可喜的成就,非常火热.就我个人来讲,有意将业余 Sport Programming 的范围扩展一下,譬如 Topcoder Mar ...

  10. zigzag数组实现

    题目出自面试宝典8.3.2 题目描述: 输入n,求一个n*n的矩阵,规定矩阵沿45度线递增,形成一个zigzag数组(JPEG编码里去像素数据的排列顺序),请问如何用C++实现? 例如: n=2 0 ...