可直接复制粘贴运行

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>canvas</title>
</head>
<body>
    <canvas width="1000" height="1000" id="mycvs">当前浏览器不支持此控件，请更换或更新浏览器</canvas>
    <script type="text/javascript">
        var a = document.getElementById("mycvs");
        var can = a.getContext("2d");
        var beginx = -(1 / 2 * Math.PI);//起始值
        var r = 150;
        var sidex = 1 * (Math.PI / 180);//增加值
        var endx = beginx + 2 * Math.PI;//结束值
        var bendx = beginx + 2 * Math.PI;
        var aendx = beginx + Math.PI;
        var tmx = beginx;//当前值
        var t = 0;
        var rends = function () {
            if (tmx + sidex >= endx) {
                tmx = beginx;
                t = t + 1;
                endx = endx - Math.PI;
                if (t == 2) {//填充颜色并退出
                    can.save();    
                    arcs(300, 300, r, beginx, aendx, true, "black");
                    arcs(300, 225, 75, beginx, aendx,null,"black");
                    arcs(300, 375, 75, beginx, aendx, true,"white");
                    arcs(300, 375, 20, beginx, bendx, null, "black");
                    arcs(300, 225, 20, beginx, bendx, null, "white");
                    return;
                }
            } else {
                tmx += sidex;
            }
            can.clearRect(0, 0, 1000, 1000);//用clearRect()函数使图像更加清晰 也造成一笔结束后上一笔清除了
            can.lineWidth = 5;
            if (t == 0)
            {           
            can.beginPath();
            can.arc(300, 300, r, beginx, tmx);           
            can.stroke();
            } else if (t == 1) {               
                can.beginPath();
                can.arc(300, 300, r, beginx, bendx);//所以在这里我又重新画了一遍外圆
        
                can.arc(300, 225, 75, beginx, tmx);
                can.arc(300, 375, 75, beginx, tmx, true);                         
                can.stroke();             
            }
            requestAnimationFrame(rends);//这个是动画控制
               
        };

function arcs(x,y,r,begin,end,f,color) {//圆心(x,y),半径r，起始值begin，结束值end，方向f，填充颜色color
            can.beginPath();
            can.fillStyle = color;
            can.arc(x, y, r, begin, end,f);
            can.fill();
            can.stroke();
        }
        rends();

</script>
</body>
</html>

这个代码有点冗余，初学者请多多指教谢谢。

canvas初学 半动态画太极图的更多相关文章

  1. canvas游戏小试：画一个按方向键移动的圆点

    canvas游戏小试:画一个按方向键移动的圆点   自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...

  2. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

  3. OpenGL进阶演示样例1——动态画线（虚线、实线、颜色、速度等）

            用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...

  4. ARCGIS动态画点

    小马哥淡定 原文 ARCGIS动态画点 private void DrawPointOnMap(double x, double y,bool clear) { IMapControl2 pMapCt ...

  5. linux C 内存管理方式之半动态

    看到半动态申请内存,第一反应这是什么鬼? 实际上半动态内存申请很容易理解,在GNU C中使用alloca函数来实现 #include <stdlib.h> void *alloca (si ...

  6. canvas 动态画线

    <!--实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,用到的事件有mousedown mousemove mouseup用的的canvas api 有 beginPath moveTo l ...

  7. 第五讲：使用html5中的canvas动态画出物理学上平抛运动

    <html> <head> <title>平抛运动</title> <script src="../js/jscex.jscexRequ ...

  8. html5使用canvas动态画医学设备毫秒级数据波形图

  9. Android -- 自定义View小Demo，动态画圆（一）

    1,转载:(http://blog.csdn.NET/lmj623565791/article/details/24500107),现在如下图的效果: 由上面的效果图可以看到其实是一个在一个圆上换不同 ...

随机推荐

  1. python 字符串的方法

    capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度 width 的新字符串 c ...

  2. linux下的Shell编程（3）shell里的流程控制

    if 语句 if 表达式如果条件命令组为真,则执行 then 后的部分.标准形式: if 判断命令,可以有很多个,真假取最后的返回值 then 如果前述为真做什么 [ # 方括号代表可选,别真打进去了 ...

  3. Java面试题——中级（下）

    内部类和静态内部类的区别 内部类: 1.内部类中的变量和方法不能声明为静态的. 2.内部类实例化:B是A的内部类,实例化B:A.B b = new A().new B(). 3.内部类可以引用外部类的 ...

  4. jacascript 立即执行函数(IIFE)与闭包

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 一直没搞清楚立即执行函数和闭包之间的关系,总结一下: 闭包有很多种理解:访问不到内部作用域,函数就是这样, ...

  5. Python 破解带密码保护的Zip文件

    今天发生了个有趣的事情,有个朋友发了一个带密码保护的Zip文件给我,却不给我密码,我就琢磨这怎么可以'猜'到密码呢? 经过一系列的尝试,最终使用python把这个密码给'猜'出来了.要想写出破解密码的 ...

  6. Python面向对象——多重继承大揭秘

    1如果如图所示使用多重继承,我们将看到什么 2我们看到了基类被执行了两次Baseclass 3代码验证吧 class BaseClass: num_base_calls = 0 def call_me ...

  7. MySQL表的创建

    第1步:设计 首先要设计一张用于我想要用途的表,例如如下用于描述个人的信息类型: 姓名: 性别: 出生日期: 地址: 最喜爱的食物. 下面为他来指定列和数据类型: 列 | 类型 | 允许值 | - | ...

  8. MSSQL 复制数据 并随机打乱写入

    select * into temp from XX order by newid() -- 复制表结构 truncate table XX -- 清空表 SET IDENTITY_INSERT XX ...

  9. 机器学习：scipy和sklearn中普通最小二乘法与多项式回归的使用对

    相关内容连接: 机器学习:Python中如何使用最小二乘法(以下简称文一) 机器学习:形如抛物线的散点图在python和R中的非线性回归拟合方法(以下简称文二) 有些内容已经在上面两篇博文中提到了,所 ...

  10. js数据结构之栈、队列（数据结构与拉火车游戏）

    1.js实现队列的数据结构(先进先出) function Queue (array) { if(Object.prototype.toString.call(array)!="[object ...