美文网首页
用canvas绘制小圆在大圆内部转动

用canvas绘制小圆在大圆内部转动

作者: kkopitehong | 来源:发表于2020-07-13 11:54 被阅读0次

今天上dribbble, 可能需要fan, 看到一个很有趣的图像动画, 于是写了一个简单版的实现

image_processing20200712-11801-7pgu1f.gif

大致思路

  1. 小圆绕大圆转, 小圆的半径是大圆半径的一半
  2. 小圆的圆心在以大圆圆心为圆心, 小圆半径为半径的圆上不断移动
  3. 计算出小圆与各条直线的交点(难点), 注意一般会得出两个交点, 需要经过判断选择其中一个交点并绘制出来

相关文章

  • 用canvas绘制小圆在大圆内部转动

    今天上dribbble, 可能需要fan, 看到一个很有趣的图像动画, 于是写了一个简单版的实现 大致思路 小圆绕...

  • [智力题]大圆小圆

    两个圆环,半径分别是1和2,小圆在大圆内部绕大圆圆周一周,问小圆自身转了几周?如果在大圆的外部,小圆自身转几周呢?...

  • 学习逻辑与思维第112题

    逻辑思维第112题:小圆能转几周?(中级题) 两个直径分别是2和4的圆环,如果小圆在大圆内部绕大圆转一周,那么小圆...

  • Canvas绘制时钟效果

    Cnavas绘制时钟 背景图的绘制(大圆、数字、小圆点),掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算...

  • 小圆、大圆

    这样一张照片,似乎可以试着用PS给画出来。 有两个圆,一圈大的,一圈小的。这两个圆交叠着,左下角的圆边为重合点,并...

  • 2017-04-25 canvas 学习笔记

    canvas 绘制线条 嵌入式不建议使用,会导致内部图片拉伸 绘制表格背景 绘制表格 绘制矩形 绘制画板 绘制弧线...

  • android Paint基本用法

    一、绘制点 ◆ 用Canvas绘制位的的情况。在用Canvas绘制位图时,一般地,我们使用drawBitmap函数...

  • Canvas绘制出一个时钟

    参考视频资料:Canvas 绘制时钟 最近复习到Canvas,先准备来段有趣的代码,用Canvas绘制出一个动态的...

  • CSS3动画之小圆随着大圆转动

    首先点此查看效果 主要原理 利用animation实现转动,然后通过transform-origin设置旋转的原点...

  • 图片的放大与缩小

    用canvas的drawImage绘制图像

网友评论

      本文标题:用canvas绘制小圆在大圆内部转动

      本文链接:https://www.haomeiwen.com/subject/oylacktx.html