精华内容
下载资源
问答
  • 实现的思路就是通过css3的...1. 如何画个圆环 2. 如何画个半圆 3. 元素旋转 4. 定位 废话不多说,直接上代码 动态画个圆环    *{  margin: 0; padding: 0;  }  .wrap{  position: relative;

    最终的效果是:用纯css实现动态画圆的动画效果


    html结构如下:

    <div class="wrap">

    <div class="circle"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    </div>

    实现的思路就是:

    1. 首先定义外层容器大小,本例采用200x200,

        .wrap{
         position: relative;
         width: 200px;
    height: 200px;

    overflow: hidden;
        }

    2. 通过border-radius画一个圆环,这个比较简单

    .circle{
    height: 100%;
    box-sizing: border-box;
    border: 20px solid red;
    border-radius: 50%;
    }

    效果如下:


    2. 然后用上下两层挡板遮住这个圆环,通过旋转挡板将圆环慢慢露出,过程如下图所示:


    通过将下层挡板旋转180deg就能够实现将下半圆慢慢画出的效果,画完以后就需要将其隐藏起来,那该如何实现呢?

    这里我用了opacity这个属性,当100%时将其设置为0,同时设置animation-fill-mode: forwards;这样就隐藏了

    0%{
    transform: rotate( 0 );
    }
    99%{
    transform: rotate( 180deg );
    opacity: 1;
    }
    100%{
    transform: rotate( 180deg );
    opacity: 0;
    }

    3. 那如何显示上半圆呢?同样的思路我们对上面挡板进行旋转,通过实际效果我们可以看到,虽然上半圆露出来了,但是确把下半圆给遮挡了。


    如何解决这个问题呢?

    我们可以在下半圆和挡板间再放一个半圆,同时设置他们的z-index,让上面的挡板旋转时被下半圆遮住,这样就可以了。


    说的有些复杂,相当于我们现在有四个元素:上挡板,下挡板,底部的大圆环,一个处在下挡板和大圆环间的半圆。

    它们的z-index如下:

    上挡板:1

    下挡板和底部的大圆间的半圆:2

    下挡板:3


    为了不增加额外的元素,下挡板和底部的大圆间的半圆我们通过伪元素来实现

    .circle:before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    top: 50%;
    left: 0;
    border: 20px solid red;
    border-top: transparent;
    border-radius:  0 0 50% 50%/ 0 0 100% 100%;
    z-index: 2;
    }

    4. 组后再结合css3的transform动画就可以了,需要注意的是,上挡板和下挡板动画是同时开始了,所以上挡板的动画要设置一个延时,时长就是下挡板动画的时长


    本例用到的知识点如下:

    1. 如何画一个圆环

    2. 如何画一个半圆

    3. css3动画

    4. 定位


    最终代码如下:


    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>动态画一个圆环</title>
        <style>
        *{
        margin: 0; padding: 0;
        }
        .wrap{
        position: relative;
        width: 200px;
    height: 200px;

    overflow: hidden;
        }
    .circle{
    height: 100%;
    box-sizing: border-box;
    border: 20px solid red;
    border-radius: 50%;
    }
    .circle:before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    top: 50%;
    left: 0;
    border: 20px solid red;
    border-top: transparent;
    border-radius:  0 0 50% 50%/ 0 0 100% 100%;
    z-index: 2;
    }
    .top, .bottom{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    background: white;

    }
    .top{
    top: 0;
    z-index: 1;
    transform-origin: center bottom;
    animation: 1s back-half linear 1s;
    animation-fill-mode: forwards;
    }
    .bottom{
    z-index: 3;
    top: 50%;
    transform-origin: center top;
    animation: 1s front-half linear;
    animation-fill-mode: forwards;
    }
    @keyframes front-half{
    0%{
    transform: rotate( 0 );
    }
    99%{
    transform: rotate( 180deg );
    opacity: 1;
    }
    100%{
    transform: rotate( 180deg );
    opacity: 0;
    }
    }
    @keyframes back-half{
    0%{
    transform: rotate( 0 );
    }
    99%{
    transform: rotate( 180deg );
    opacity: 1;
    }
    100%{
    transform: rotate( 180deg );
    opacity: 0;
    }
    }
        </style>
    </head>
    <body>
    <div class="wrap">
    <div class="circle"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    </div>
    </body>
    </html>

    展开全文
  • 次项目开发中,有个应用需求,就是不仅展示用户答题之后的分数和测评等级,还要利用动画圆圈的形式展示用户完成比。首先一般先想到的就是利用canvas绘图,因为如果用CSS来制作的话会很麻烦,而且还要配合脚本...

    在一次项目开发中,有个应用需求,就是不仅展示用户答题之后的分数和测评等级,还要利用动画圆圈的形式展示用户完成比。

    首先一般先想到的就是利用canvas绘图,因为如果用CSS来制作的话会很麻烦,而且还要配合脚本一起完成才行。

    HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

    不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

    getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

    getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

    具体可查看w3c官网文档里给出的介绍:http://www.w3school.com.cn/tags/html_ref_canvas.asp

    还有小程序官网平台给出的文档:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html?search-key=arc


    好,现在开始正式绘制这个需求。

    canvas其中有一个属性是绘图的关键,那就是它的arc属性,具体是这样的:

       let cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
       /*
       cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
       x                  Number    圆的x坐标
       y                  Number    圆的y坐标
       r                  Number    圆的半径
       sAngle             Number    起始弧度,单位弧度(在3点钟方向)
       eAngle             Number    终止弧度
       counterclockwise   Boolean   可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。
       */

    这里尤其要特别注意的是第四个参数,第四个参数代表绘图的起始弧度,并且默认是从三点钟方向开始的,所以如果想从12点钟方向开始绘图的话,需要将第四个参数设置为:- Math.PI * 1 / 2。意思很明显,因为第六个参数是指绘图的方向,如果设置为false,那就是顺时针,一般也设置为顺时针,因为12点钟是在3点钟的逆时针方向上,所以第四个参数应该为负数,即需要负整个圆的四分之一,因为2*PI代表的是整个圆,那么1/2就是四分之一圆了,所以要想从12点钟开始绘图,那么第四个参数需设置为:- Math.PI * 1 / 2。

    好,接下来直接上代码:

    上代码之前,这里给三个个提示:

    1.就是脚本里面设置的一些关系像素的数据默认都是px,而现在小程序为了兼容各个移动终端,给出了一个新的像素单位,就是rpx。但是canvas绘图是与脚本一起完成的,所以这里建议大家还是统一像素单位比较好;

    2.下面我是用定时器setInterval实现的,一定要注意的是,一旦启用定时器,那么在实现你的功能之后,一定要记得关闭;

    3.微信小程序里有一个用于展示进度的组件<progress>,大家可以直接调用,但是比较局限。链接:https://developers.weixin.qq.com/miniprogram/dev/component/progress.html?search-key=progress

    HTML部分:

    <view class='circleBar'>
      <view class="wrap">
        <view class="top">
            <canvas class="cir" style=' width:106px; height:106px;' canvas-id="canvasArc"></canvas>
            <view class="centerWord">{{resultComment}}</view>
        </view>
      </view>
    </view>

    CSS部分:

    /* 圆形进度条 */
    
    .circleBar {
      width: 100%;
      height: auto;
      overflow: hidden;
      position: relative;
    }
    
    .cir {
      display: inline-block;
      background-color: #fff;
      border-radius: 100%;
    }
    
    .top {
      text-align: center;
    }
    
    .centerWord {
      width: 100%;
      position: absolute;
      top: 40px;
      left: 0;
      text-align: center;
      color: #3686ff;
    }

    JS部分:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        timer: ''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        let that = this;
        // 以下两个是测试数据
        let totalItems = 100;
        let rightItems = 80;
        let completePercent = parseInt((rightItems / totalItems) * 100);
        that.getResultComment(completePercent);
        that.showScoreAnimation(rightItems, totalItems);
      },
    
      showScoreAnimation: function (rightItems, totalItems) {
       /*
       cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
       x	                    Number	  圆的x坐标
       y	                    Number	  圆的y坐标
       r	                    Number	  圆的半径
       sAngle	            Number	  起始弧度,单位弧度(在3点钟方向)
       eAngle	            Number	  终止弧度
       counterclockwise	    Boolean	  可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。
       */
        let that = this;
        let copyRightItems = 0;
        that.setData({
          timer: setInterval(function () {
            copyRightItems++;
            if (copyRightItems == rightItems) {
              clearInterval(that.data.timer)
            } else {
              // 页面渲染完成
              // 这部分是灰色底层
              let cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
              cxt_arc.setLineWidth(6);//绘线的宽度
              cxt_arc.setStrokeStyle('#d2d2d2');//绘线的颜色
              cxt_arc.setLineCap('round');//线条端点样式
              cxt_arc.beginPath();//开始一个新的路径
              cxt_arc.arc(53, 53, 50, 0, 2 * Math.PI, false);//设置一个原点(53,53),半径为50的圆的路径到当前路径
              cxt_arc.stroke();//对当前路径进行描边
              //这部分是蓝色部分
              cxt_arc.setLineWidth(6);
              cxt_arc.setStrokeStyle('#3ea6ff');
              cxt_arc.setLineCap('round')
              cxt_arc.beginPath();//开始一个新的路径
              cxt_arc.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);
              cxt_arc.stroke();//对当前路径进行描边
              cxt_arc.draw();
            }
          }, 20)
        })
      },
    
      getResultComment: function (completePercent) {
        let that = this;
        switch (true) {
          case completePercent < 60:
            that.setData({
              resultComment: "渣渣"
            })
            break;
          case completePercent >= 60 && completePercent <= 69:
            that.setData({
              resultComment: "学弱"
            })
            break;
          case completePercent >= 70 && completePercent < 80:
            that.setData({
              resultComment: "中等"
            })
            break;
          case completePercent >= 80 && completePercent < 90:
            that.setData({
              resultComment: "良好"
            })
            break;
          case completePercent >= 90 && completePercent < 95:
            that.setData({
              resultComment: "优秀"
            })
            break;
          case completePercent >= 95 && completePercent < 100:
            that.setData({
              resultComment: "学霸"
            })
            break;
          case completePercent >= 100:
            that.setData({
              resultComment: "学神"
            })
            break;
        }
      },
    })

    下来是效果展示图:




    展开全文
  • 实现效果 使用canvas绘制个圆形,实现绕着个中心,轨迹类似于走个椭圆的轨迹那样路线,并且实现漂浮的效果。这里只是个实例Demo,直接运行就可以,下面附上代码:<!doctype html> ...

    实现效果 使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果。

    这里只是一个实例Demo,直接运行就可以,下面附上代码:


    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
        <style type="text/css">
            @keyframes animX{
                0% {left: 0px;}
                100% {left: 500px;}
            }
            @keyframes animY{
                0% {top: 0px;}
                100% {top: 500px;}
            }
    
            #ball {
                width: 100px;
                height: 100px;
                background-color: #f99;
                border-radius: 50%;
                position: absolute;
                animation:animX 4s ease-in-out -2s infinite alternate, animY 4s ease-in-out infinite alternate;
            }
        </style>
    </head>
    <body>
    <div id="ball"></div>
    </body>
    </html>

    展开全文
  • JQuery 写个圆形动画加载进度条

    千次阅读 2016-02-04 10:40:35
    drawProcess()这个方法主要是画圆的大小 ...2.100:的宽度(而<canvas>标签设置的高宽是不起作用的) 3.20:2秒之后执行这个addNum方法 、画单色进度圆环,效果如下图: <!DOCTYPE ht...

    drawProcess()这个方法主要是画圆的大小

    上面所写到的 setInterval("addNum(90,100)",20);  分别指的是:

    1.这里的三个参数分别是90:在90%处

    2.100:圆的宽度(而<canvas>标签设置的高宽是不起作用的)

    3.20:2秒之后执行这个addNum方法

    一、画单色进度圆环,效果如下图:

    <!DOCTYPE html>
    <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Canvas绘图</title>
    <script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    </head>
    <body>
    <canvas class="process" width="100px" height="100px">0%</canvas>  
    </body>
    <script>
    $(document).ready(function() {
    //drawProcess();
        i = 0;
        var t = setInterval("addNum(90,100)",20);
    });
    function addNum(percent,width) {
        if(i<percent){
        i++;
        $('canvas.process').text(i+"%");
            drawProcess(width);
        }else{
            clearInterval(t);
        }
    }
    
    function drawProcess(width) {  
        $('canvas.process').each(function() {
            var text = $(this).text();
            var process = text.substring(0, text.length-1);   
            var canvas = this;  
            var context = canvas.getContext('2d');  
            context.clearRect(0, 0, width, width);  
    
            context.beginPath();  
            context.moveTo(width/2, width/2);  
            context.arc(width/2, width/2, width/2, 0, Math.PI * 2, false);  
            context.closePath();  
            context.fillStyle = '#ddd';  
            context.fill();  
    
            context.beginPath();  
            context.moveTo(width/2, width/2);    
            context.arc(width/2, width/2, width/2, 0, Math.PI * 2 * process / 100, false);  
            context.closePath();  
            context.fillStyle = '#2a2';  
            context.fill();   
    
            context.beginPath();  
            context.moveTo(width/2, width/2);  
            context.arc(width/2, width/2, width/2 - 10, 0, Math.PI * 2, true);  
            context.closePath();  
            context.fillStyle = 'rgba(255,255,255,1)';  
            context.fill();  
    
            context.beginPath();  
            context.arc(width/2, width/2, width/2 - 20, 0, Math.PI * 2, true);  
            context.closePath();  
            context.strokeStyle = '#ddd';  
            context.stroke();  
            context.font = "bold 9pt Arial";  
            context.fillStyle = '#2a2';  
            context.textAlign = 'center';  
            context.textBaseline = 'middle';  
            context.moveTo(width/2, width/2);  
            context.fillText(text, width/2, width/2);  
        });
    }
    </script>
    </html> 

    二、画渐变色进度圆环,效果如下图:

     

    <!DOCTYPE html>  
    <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    <title>Canvas绘图</title>  
    <script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    </head>  
    <body>  
    <canvas class="process" width="100px" height="100px">0%</canvas>    
    </body>  
    <script>  
    $(document).ready(function() {  
    //drawProcess();  
        i = 0;  
        var t = setInterval("addNum(90,100)",20);  
    });  
    function addNum(percent,width) {  
        if(i<percent){  
        i++;  
        $('canvas.process').text(i+"%");  
            drawProcess(width);  
        }else{  
            clearInterval(t);  
        }  
    }  
    //设置外环的宽度(其实<canvas>设置的高宽是不起作用的,而是这里设置才会有用)
    function drawProcess(width) {    
        $('canvas.process').each(function() {  
            var text = $(this).text();  
            var process = text.substring(0, text.length-1);     
            var canvas = this;    
            var context = canvas.getContext('2d');    
            context.clearRect(0, 0, width, width);    
      
            //环背景色
            context.beginPath();    
            context.moveTo(width/2, width/2);    
            context.arc(width/2, width/2, width/2, 0, Math.PI * 2, false);    
            context.closePath();    
            context.fillStyle = '#ddd';    
            context.fill();    
            
            //环前景色渐变色
            context.beginPath();    
            context.moveTo(width/2, width/2);      
            context.arc(width/2, width/2, width/2, Math.PI * 1.5, Math.PI * 1.5 * process / 100, false);    
            context.closePath();   
            var lGrd = context.createLinearGradient(0,0, 300, 300);  
            lGrd.addColorStop(0, '#ff0000');  
            lGrd.addColorStop(1, '#0000ff');  
            context.fillStyle = lGrd;  
            context.fill();     
      
            //设置内圆透明
            context.beginPath();    
            context.moveTo(width/2, width/2);    
            context.arc(width/2, width/2, width/2 - 10, 0, Math.PI * 2, true);    
            context.closePath();    
            context.fillStyle = 'rgba(255,255,255,1)';    
            context.fill();    
      
            //设置内环边框跟百分度
            context.beginPath();    
            context.arc(width/2, width/2, width/2 - 20, 0, Math.PI * 2, true);    
            context.closePath();    
            context.strokeStyle = '#ddd';    
            context.stroke();    
            context.font = "bold 9pt Arial";    
            context.fillStyle = '#2a2';    
            context.textAlign = 'center';    
            context.textBaseline = 'middle';    
            context.moveTo(width/2, width/2);    
            context.fillText(text, width/2, width/2);    
        });  
    }  
    </script>  
    </html>  

    三、<canvas>一些方法的用法

    1、画渐变

    createLinearGradient() 方法创建线性的渐变对象。

    渐变可用于填充矩形、圆形、线条、文本等等。

    提示:请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

    提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。

    • JavaScript 语法:

    context.createLinearGradient(x0,y0,x1,y1);
    • 参数值

    参数 描述
    x0 渐变开始点的 x 坐标
    y0 渐变开始点的 y 坐标
    x1 渐变结束点的 x 坐标
    y1 渐变结束点的 y 坐标

    2、画圆弧

    • JavaScript 语法:

    context.arc(x,y,r,sAngle,eAngle,counterclockwise);
    • 参数值

    参数 描述
    x 圆的中心的 x 坐标。
    y 圆的中心的 y 坐标。
    r 圆的半径。
    sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
    eAngle 结束角,以弧度计。
    counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。

    如果想详细学习html <canvas>的用法的话可以http://www.w3school.com.cn/tags/html_ref_canvas.asp

     

     

    展开全文
  • CSS3添加动态圆点

    万次阅读 2020-12-16 14:39:53
    <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>...@-webkit-...
  • Android Cocos2d实现:个图片围绕个圆心做运动 转载自:http://www.longhaiqiang.com/android-cocos2d实现:个图片围绕个圆心做运动/ 实现效果: public class CCRoundBy ...
  • 在ARM开发板的屏幕上画,并使圆动起来

    千次阅读 多人点赞 2018-07-21 15:52:22
    本人使用的是三星6818开发板 (ARM Cortex-A53架构),Linux系统。屏幕的大小是800*480。即有800*480个像素点。只要把属于球那部分的像素点与...画需要确定的圆心坐标(X,Y)以及半径R。比如先把画在屏幕...
  • 最近在做电子栅栏但在绘制栅栏的那个圆圈时出现问题,在地图上绘制的话, 那个圈要跟着地图移动但我又想不让它; 各位大神有没有办法!求指教!
  • 使用svg实现个半圆圆角进度条

    千次阅读 2019-07-17 15:44:46
    前言 在使用echarts环形图实现半圆进度条的过程中,遇到个究极蛋疼的问题,这个进度条需要是个圆角的,但是目前echarts对圆角的支持并不完善(只支持平角和尖角,尖角的实现请看:使用echarts... 无论如何...
  • 放大动画 比较简单,这里主要来分析一下位移动画(1)、先去掉缩放效果:(2)、去掉其中的个圆球现在基本可以看出主要原理就是让其中个圆球绕另个球做圆弧运动,只要确定个圆球的运动轨迹,另个圆球和它左...
  • 用Canvas画带动画的渐变数字圆环

    千次阅读 2016-04-13 13:10:17
    先放效果图这是个自定义view,布局就是个简单的线性布局而已,通过addview的方式,将自定义view显示出来; 渐变以及外圈、外圈小是自定义view,其他三个文字是Textview;github的地址: ...
  • IOS利用UIBezierPath画动画

    千次阅读 2015-01-28 16:44:12
    //动画显示则调用 [self drawLineAnimation:arcLayer]; } - (void)drawLineAnimation:(CALayer*)layer { CABasicAnimation *bas = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; bas.duration = 1; ...
  • MFC 鼠标拖动画

    千次阅读 2007-05-15 23:53:00
    先计算出圆心, 半径, 然后再根据圆心半径计算出矩形(正方形)的左上角跟右下角的顶点, 然后用Ellipse函数画圆。源代码如下:在**view类头文件里添加如下变量private: bool m_bLButtonDown; bool m_bErase;...
  • 滴滴作为第批的微信小程序开发者,大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们就分享部分滴滴做过的案例:
  • 这样的个风车不断均匀的顺时针旋转。 实现代码 import javafx.animation.Animation; import javafx.animation.Interpolator; import javafx.animation.RotateTransition; import javafx.application....
  • //绘制个小(作为小球) 四个参数代表坐标 半径 画笔 canvas.drawCircle(currentX, currentY, 15, p); } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated ...
  • css3画个运动的钟表

    千次阅读 2016-12-13 16:00:21
    1.定义个盒子,然后通过border-radius变为 2.画6条线,然后通过定位,把这6条线设置到大盒子里,作为钟表刻度 3.画个小,通过定位将中间部分的线条遮住 4.画中心点和时分秒针 5.最后在设置...
  • 百度地图画圆:动态绘制显示半径     在开发百度地图时,项目需要借助画圆工具框选地图上的点,原始画圆工具可以通过 enableCalculate() 方法获取框选区域面积,进而可以计算的半径。 &...
  • 转载请注明出处,谢谢~ 这个效果其实还算简单,只是需要一些计算和猜想。...先看怎么实现,这种类似运动轨迹的问题,不建议用图片实现,所以这里的我们用Canvas和Paint画出来: Paint paint = new P
  • Css3动画 - 小围绕大的自转公转

    千次阅读 2018-11-13 17:39:25
    个面试题,题目:实现个小围绕大转圈   例1】、先让她转起来,也就是自转: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=&...
  • 使用Mathematica绘制滚线(Cycloid)

    千次阅读 2018-05-09 00:28:54
    定义:百度百科:“圆滚线指动圆沿同一平面内的直线或另圆周作无滑动地滚动时,动圆上任何点的轨迹。这种曲线首先由伽利略提出。圆上定点的初始位置为坐标原点,定直线为x轴。当圆滚动j 角以后,圆上定点从O...
  • 需要达到效果如下: 输入命令:C 再输入命令:T 指定对象与的第个切点:随便选上一点 指定对象与的第二个切点:随便选直线上一点 输入半径:5  然后回车就可以了...
  • 原始图片及其来源: 图片来源(二手) 修改延伸其变化之后的效果:
  • 步绘制个整颜色自定义,第二部绘制个内,其半径要小于外颜色自定 最后一步按照百分比绘制第三个,颜色自定。 要实现动态绘制第三步的效果,只要添加个定时器的功能,每隔段时间绘制段距离...
  • pygame_drawCircle使用pygame画

    千次阅读 2017-12-20 16:46:42
    使用pygame在屏幕上画
  • 在网上找了好久的步骤条插件,可惜不尽人意,只能自己动手写个,下面直接展示效果图
  • CSS3实现圆形轨迹动画

    千次阅读 2018-06-27 18:18:01
    1、代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="...lt
  • cesium添加环形扩散,动态扩散

    千次阅读 2020-01-14 11:32:44
    1 首先实现添加的逻辑 let entity= viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(103.0, 40.0), name: 'Red ellipse on surface with outline', ellipse: { semiMinorAxis: 250000.0...
  • Android圆形向外扩散颜色渐浅动画

    万次阅读 2015-07-16 15:28:43
    下载链接:... 首先自定义个view package com.brucezee.circlewavedemo; import android.content.Context; import android.graphics.Canvas; import android
  • 两个圆环,半径分别是1和2,小在大内部绕大圆周周,问小自身转了几周?如果在大的外部,小自身转几周呢? 1 3 3 6 1 2 2 4 链接:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 240,596
精华内容 96,238
关键字:

一动圆