<!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. SpringCloud教程 | 第三篇: 服务消费者（Feign）(Finchley版本)

    上一篇文章,讲述了如何通过RestTemplate+Ribbon去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 一.Feign简介 Feign是一个声明式的伪Http客户端,它使得写Htt ...

  2. Duplicate entry '127' for key 'PRIMARY'的解决方法

    如果这个时候数据表里面没有数据,而且我们用使用 INSERT INTO VALUES 这样的语句插入,就会提示 Duplicate entry '127' for key 'PRIMARY'

  3. 第二章第一个项目——关于mime

    一句话就能解释清楚. MIME标注HTTP响应类型. 而后缀名标注文件类型. ---------分割线-------- http响应实质上只有数据,没有文件名. 举个例子吧. HTTP/1.1 200 ...

  4. Maven整理笔记のMaven使用

    POM 就像Make的Makefile,Ant的build.xml一样,Maven项目的核心是pom.xml.POM(Project Object Model项目对象模型),定义了项目的基本信息,用于 ...

  5. Delphi XE8 iOS与Android移动应用开发(APP开发)教程[完整中文版]

    https://item.taobao.com/item.htm?id=536584650957&toSite=main

  6. 用 Inkscape 做 SVG 给 TPath

    FireMonkey 里的 TPathData 支持 SVG 的基本绘图指令,因此可以运用 Inkscape 软件,提取 SVG 的绘图内容,请见图片说明: INKSCAPE https://inks ...

  7. MyBatis 一级缓存避坑

    MyBatis 一级缓存(MyBaits 称其为 Local Cache)无法关闭,但是有两种级别可选: package org.apache.ibatis.session; /** * @autho ...

  8. [LeetCode 题解]: Container With Most Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  9. 如何快速解决myeclipse中导入jquery文件的报错。

    如何快速解决myeclipse中导入jquery文件的报错. 解决: 选中错误的文件, 点击右键, 选中myeclipse,点击Exclude From Validation.

  10. python 调试器

    pdb https://www.zhihu.com/question/21572891 https://zhuanlan.zhihu.com/p/43846098