八卦图：

<body>

canvas id=" myCanvas" width="" height= ”"></canvas>

<script>

//获取到画布元素

let myCanvas = document.getElementById( "myCanvas );

//通过画布元素获取到上下文(画笔)

let ctx = myCanvas.getContext("2d" );

//右边白色的半圆

ctx.fillstyle =“#fff";

ctx.beginPath();

ctx.arc(, , , (Math.PI / ) * , (Math.PI / ) * );

ctx.fill();

//左边黑色的圆

ctx.fillstyle = #";

ctx.beginPath();

ctx.arc(, , ， (Math.PI / ) * , (Math.PI / ) * , true);

ctx.fill();

//左边白色的小圆

ctx.fillstyle = "#fff";

ctx.beginPath();

ctx.arc(, ，, (Math.PI / ) * , (Math.PI / ) ., true);

ctx.fill();

//右边黑色的小圆

ctx.fillstyle =“#” ;

ctx.beginPath();

ctx.arc(, , , (Math.PI / ) * , (Math.PI / ) * );

ctx.fill();

//黑色的小圆点

ctx.fillstyle =“#" ;

ctx.beginPath();

ctx.arc(, ， , , Math.PI * );

ctx.fill();

//白色的小圆点

ctx.fillstyle =“#fff";

ctx.beginPath();

ctx.arc(, , , , Math.PI * );

ctx.fill();

</script>

</body>

时钟：

<body>

    <canvas id="myCanvas" width="500" height="400">

        很抱歉,你的浏览器不支持canvas元素

    </canvas>

    <script>

        var c = document.getElementById('myCanvas');//获取Canvas对象

        var ctx = c.getContext('2d');//获取上下文

        function drawClock()

        {

            ctx.clearRect(0,0, c.width, c.height);//清除画布

            c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠

            var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径

            /*获取实际的时间*/

            var objTime = new Date();

            var objHour = objTime.getHours();

            var objMin = objTime.getMinutes();

            var objSen = objTime.getSeconds();

            /*将时间转换为具体的弧度*/

            /*

             * 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向

             * 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间

             * 分针和秒针是每次相隔6度

             */

            var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;

            var arcMin = (-90+objMin*6)*Math.PI/180;

            var arcSen = (-90+objSen*6)*Math.PI/180;

            /*绘制圆盘*/

            ctx.beginPath();

            for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60

            {

                ctx.moveTo(x,y);

                ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

            }

            ctx.closePath();

            ctx.stroke();

            /*绘制白盘盖住下面的线*/

            ctx.fillStyle = 'white';

            ctx.beginPath();

            ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19

            ctx.closePath();

            ctx.fill();

            /*依葫芦画瓢,制作每一个小时的线*/

            /*绘制圆盘*/

            ctx.beginPath();

            ctx.lineWidth = 3;

            for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12

            {

                ctx.moveTo(x,y);

                ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

            }

            ctx.closePath();

            ctx.stroke();

            /*绘制白盘盖住下面的线*/

            ctx.fillStyle = 'white';

            ctx.beginPath();

            ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18

            ctx.closePath();

            ctx.fill();

            /*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/

            /*开始绘制时针*/

            ctx.beginPath();

            ctx.moveTo(x,y);

            ctx.lineWidth = 7;

            ctx.lineCap = 'round';

            ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10

            ctx.stroke();

            ctx.closePath();

            /*开始绘制分针*/

            ctx.beginPath();

            ctx.moveTo(x,y);

            ctx.lineWidth = 5;

            ctx.lineCap = 'round';

            ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12

            ctx.stroke();

            ctx.closePath();

            /*开始绘制秒针*/

            ctx.beginPath();

            ctx.moveTo(x,y);

            ctx.lineWidth = 2;

            ctx.lineCap = 'round';

            ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16

            ctx.stroke();

            ctx.closePath();

        }

        setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数

    </script>

</body>

canvas-八卦图和时钟实现的更多相关文章

  1. canvas画布——画八卦图

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  2. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  3. Aristochart – 灵活的 HTML5 Canvas 折线图

    Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...

  4. 使用CSS达到阴阳八卦图等图形

    CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  5. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  6. 用CSS实现阴阳八卦图等图形

    CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  7. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  8. canvas 绘制八卦图

    绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...

  9. [html5] canvas 绘图：八卦图

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. 数据分析 - Power BI 链接 mysql 数据分析

    链接数据库 点击确定后选择数据库, 然后输入用户名密码, 选择级别选择指定的数据库即可 之后弹出的导航器中即可有可预览的数据 更加推荐使用 再链接数据库的时候高级查询的 sql 中进行 sql 的执行 ...

  2. MySQL中的sleep函数介绍

    MySQL数据库中有一个不太常用但便于进行某些调试的函数:sleep(),今天我们就来介绍一下这个函数的用法. 首先,看看官网对于函数的定义: SLEEP(duration)Sleeps (pause ...

  3. 一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛

    富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/uedit ...

  4. Hadoop 部署之 Hadoop (三)

    目录 一.Hadoop 介绍 1.HDFS 介绍 2.HDFS 组成 3.MapReduce 介绍 4.MapReduce 架构 JobTracker TaskTracker 二.Hadoop的安装 ...

  5. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  6. MySQL之LEFT JOIN中使用ON和WHRERE对表数据

    背景 left join在我们使用mysql查询的过程中可谓非常常见,比如博客里一篇文章有多少条评论.商城里一个货物有多少评论.一条评论有多少个赞等等.但是由于对join.on.where等关键字的不 ...

  7. javaweb期末项目-stage2-项目创建、配置、接口设计和功能实现（含核心源码）

    项目的创建.配置.接口设计和功能实现(含核心代码).rar--下载 说明:解压密码为袁老师的全名拼音(全小写) 相关链接: 项目结构:https://www.cnblogs.com/formyfish ...

  8. STL标准模板库之set

    目录 一.关联式容器 二.什么是set? 特点 优缺点和适用场景: 三.定义及初始化 四.基本操作 1)容量函数 2)修改函数 3)迭代器 4)其他函数 五.与序列容器的不同点 一.关联式容器 关联式 ...

  9. emacs 常用命令

    C stands for Ctrl and M stands for Alt  REFERENCE FORM EMACS TUTORIAL 表述不一定正确,仅供参考,主要是要多实践,一开始可能会不习惯 ...

  10. windows 修改Administrator管理员账户名

      用[Win+R]组合键命令打开[运行]界面,输入[gpedit.msc],按[回车键]或[鼠标左键]单击[确定]按钮:   在弹出的[本地组策略编辑器]对话框中,依次[鼠标左键]点击打开:[计算机 ...