<!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. 实践作业4---DAY3阶段二。

    第二阶段是用户调研,我们小组选择了一个5班的同学,作为采访对象.采访比较详实,但是样本太少,不太有说服力. 具体采访详情如下: 问:请问您使用喜欢发表Blog么? 答:肯定有啊. 问:都用什么网站发表 ...

  2. Shell脚本中$0、$?、$!、$$、$*、$#、$@

    1. $$Shell本身的PID(ProcessID) 2. $!Shell最后运行的后台Process的PID 3. $?最后运行的命令的结束代码(返回值) 4. $-使用Set命令设定的Flag一 ...

  3. spark安装配置（scala不是必须的，基于java虚拟机，因此scala可以不配，但是开发需要可以配）

    下载 http://spark.apache.org/downloads.html 下载2.3.1 https://blog.csdn.net/qq_15349687/article/details/ ...

  4. idea新建maven项目没有src目录

    方法一:设置idear的maven运行参数 或: 加:archetypeCatalog=internal 如果ctrl+alt+s进设置,只能对当前项目新建Module其作用: 方法二:在新建mave ...

  5. Linux Centos下SQL Server 2017安装和配置

    说到SQL Server服务,我们大家都知道是Microsoft公司的数据库服务,当然说到数据库,现在主要分为三大商:1:Oracle.2:Msql Server.3:Mysql:三种数据库在当下环境 ...

  6. git .gitignore忽略规则不生效解决办法

    忽略规则不生效, 原因是.gitignore只能忽略那些原来没有被track的文件, 如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的. 那么解决方法就是先把本地缓存删除(改变成 ...

  7. 【08】循序渐进学 docker：docker compose

    写在前面的话 在之前的操作中,即使是单个容器每次都需要敲很长的命令,当需要多个容器组合着用的时候更加麻烦,此时我们急需找到一种一次配置,随便运行的方法. 这就是这一节重点,单机容器编排工具:docke ...

  8. Excel一对多查询（index+small+if）

    一.学习 一对多查询模式化数组公式: =INDEX(区域,SMALL(IF(条件,行号数组,4^8),ROW(A1))) 三键齐按(ctrl+shift+回车) 在具有多个符合条件的情况下,提取和匹配 ...

  9. apply和call的用法

    以前对与apply()还有call()一直处于一种我知道这是干什么,但是不知道怎么使用的情况,今天看别人的博客的时候,看到了一点这类知识,感觉有点感觉,现在把新的心得写下来. A.apply(B,[a ...

  10. AutoCAD.Net圆弧半径标注延长线

    #region 注册RegApp public static void CheckRegApp(string regapptablename) { Database db = HostApplicat ...