<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>仪表盘</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

    <meta name="apple-mobile-web-app-capable" content="yes">

 </head>

 <style type="text/css">

    body{margin:20px auto; padding:0; width:800px; }

    /*canvas{border:dashed 2px #CCC}*/

 </style>

 <script type="text/javascript">

    var canid;

    function $$(id){

        return document.getElementById(id);

    }

    function pageLoad(){

        var can = $$(canid);

        var cans = can.getContext('2d');

        cans.beginPath();

        cans.arc(400,300,180,-10,0,false);

        //cans.closePath();

        cans.strokeStyle = 'red';

        cans.fillStyle = "blue";

        cans.lineWidth = 30;

        cans.stroke();

        cans.beginPath();

        cans.arc(400,300,90,0,4/3*Math.PI,true);

        //cans.closePath();

        cans.strokeStyle = 'red';

        cans.fillStyle = "blue";

        cans.lineWidth = 10;

        cans.fill();

        //cans.beginPath();

        //cans.arc(400,300,90,0,Math.PI,2);

        //cans.closePath();

        //cans.strokeStyle = 'blue';

        //cans.lineWidth = 80;

        //cans.stroke();

    }

    function pageLoad2(a,b,c,d,e,f,g){

        var can = $$(canid);

        var cans = can.getContext('2d');

        cans.beginPath();

        cans.arc(a,b,c,d,e,f);

        cans.strokeStyle = g;

        cans.fillStyle = g;

        cans.lineWidth = 30;

        cans.stroke();

        cans.font = "bold 30px Arial";

        cans.fillStyle = g;

    }

    function Drawarc(yuanxinx,yuanxiny, banjing, value, dengfen){

        var can = $$(canid);

        var cans = can.getContext('2d');

        cans.beginPath();

        cans.arc(yuanxinx,yuanxiny,banjing,(Math.PI*2)*(180/360),(Math.PI*2)*(((180/dengfen)*value+178)/360),false);

        var yanse;

        if (value<=7)

            yanse = '#81d135';

        if (value>7 && value<=14)

            yanse = '#fdc159';

        if (value>14)

            yanse = '#fb6376';

        cans.strokeStyle = yanse;

        cans.fillStyle = yanse;

        cans.lineWidth = 2;

        cans.stroke();

        cans.font = "bold 30px Arial";

        cans.fillStyle = yanse;

    }

    function Square(x)

    {

        return x*x;

    }

    function DrawLine(x1,y1,x2,y2)

    {

        var can = $$(canid);

        var cans = can.getContext('2d');

        cans.strokeStyle='#000';

        cans.lineWidth=1;

        //cans.lineCap='square';

        cans.beginPath();

        cans.moveTo(x1,y1);

        cans.lineTo(x2,y2);

        cans.stroke();

        //cans.closePath();

    }

    function Drawarc1(yuanxinx,yuanxiny, banjing, value, dengfen){

        var can = $$(canid);

        var cans = can.getContext('2d');

        cans.beginPath();

        var jiaodu = 180 - (180/dengfen)*value;

        var jiaodu1 = jiaodu-1.8;

        var jiaodu2 = jiaodu+1.8;

        var x1 = yuanxinx + banjing * Math.cos((jiaodu * 3.14)/180.0);

        var y1 = yuanxiny - banjing * Math.sin((jiaodu * 3.14)/180.0);

        var jiaodian1x = yuanxinx + banjing * Math.cos((jiaodu1 * 3.14)/180.0);

        var jiaodian1y = yuanxiny - banjing *Math.sin((jiaodu1 * 3.14)/180.0);

        var jiaodian2x = yuanxinx + banjing * Math.cos((jiaodu2 * 3.14)/180.0);

        var jiaodian2y = yuanxiny - banjing *Math.sin((jiaodu2 * 3.14)/180.0);

        //缩短短半径

        //alert(x1 +','+ y1);

        var sdbanjing = banjing -20;

        var jiaodian3x = yuanxinx + sdbanjing *Math.cos((jiaodu * 3.14)/180.0);

        var jiaodian3y = yuanxiny - sdbanjing *Math.sin((jiaodu * 3.14)/180.0);

        var jcbanjing = banjing +6;

        var jiaodian4x = yuanxinx + jcbanjing *Math.cos((jiaodu * 3.14)/180.0);

        var jiaodian4y = yuanxiny - jcbanjing *Math.sin((jiaodu * 3.14)/180.0);

        //alert(jiaodian3x +','+ jiaodian3y);

        DrawLine(jiaodian1x,jiaodian1y, jiaodian3x, jiaodian3y);

        DrawLine(jiaodian2x,jiaodian2y, jiaodian3x, jiaodian3y);

        //DrawLine(jiaodian1x,jiaodian1y, jiaodian4x, jiaodian4y);

        //DrawLine(jiaodian2x,jiaodian2y, jiaodian4x, jiaodian4y);

        cans.arc(x1,y1,4,0,Math.PI*2,false);

        var yanse;

        if (value<=7)

            yanse = '#81d135';

        if (value>7 && value<=14)

            yanse = '#fdc159';

        if (value>14)

            yanse = '#fb6376';

        cans.strokeStyle = yanse;

        cans.fillStyle = yanse;

        cans.lineWidth = 2;

        cans.stroke();

        //(a^2 + c^2 - b^2) / (2·a·c)

        var jiajiao = Math.round( Math.acos( (Square(banjing)+ Square(banjing) - Square(4)) / (2*banjing*banjing) ) * 180/Math.PI );

        //alert(jiajiao);

    }

    function Drawscaleline(yuanxinx,yuanxiny, banjing, kaishijd, jieshujd, dengfen, yanse)

    {

        var can = $$(canid);

        var cans = can.getContext('2d');

        for (var i=0;i<dengfen;i++)

        {

            dfjd = ((jieshujd - kaishijd)/dengfen)*i;

            cans.beginPath();

            cans.arc(yuanxinx,yuanxiny,banjing, (Math.PI*2)*((kaishijd+dfjd)/360),(Math.PI*2)*((kaishijd+dfjd+1)/360),false);

            cans.strokeStyle = yanse;

            cans.lineWidth = 20;

            cans.stroke();

        }

    }

    function DrawText(yuanxinx,yuanxiny, banjing, jiaodu, text, g)

    {

        var can = $$(canid);

        var cans = can.getContext('2d');

        cans.font = "bold 10px Arial";

        cans.strokeStyle = g;

        cans.fillStyle = g;

        var jcbanjing = banjing -15;

        x1 = yuanxinx + jcbanjing * Math.cos((jiaodu * Math.PI)/180.0);

        //if (jiaodu>90)

        //    x1 = x1 +10;

        //else

        //    x1 = x1-18;

        y1   =  yuanxiny - jcbanjing *Math.sin((jiaodu * Math.PI)/180.0);

        cans.fillText(text,x1,y1);

    }

    function dashboard(id)

    {

        canid = id;

        var can = $$(canid);

        var banjing = (can.width/2);

        var yuanxinx = can.width/2;

        var yuanxiny = can.height;

        var cans = can.getContext('2d');

        pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(180/360),(Math.PI*2)*(240/360),false,'#81d135');

        pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(240/360),(Math.PI*2)*(300/360),false,'#fdc159');

        pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(300/360),(Math.PI*2)*(360/360),false,'#fb6376');

        Drawscaleline(yuanxinx,yuanxiny,banjing-40,180,240,6, '#6db52b');

        Drawscaleline(yuanxinx,yuanxiny,banjing-40,240,300,6, '#f4bd5f');

        Drawscaleline(yuanxinx,yuanxiny,banjing-40,300,361,6, '#ef5469');

        Drawarc(yuanxinx,yuanxiny,banjing-62,12,21);

        Drawarc1(yuanxinx,yuanxiny,banjing-62,12,21);

        DrawText(yuanxinx,yuanxiny,banjing,180, '0', '#81d135');

        DrawText(yuanxinx,yuanxiny,banjing,120, '7', '#fdc159');

        DrawText(yuanxinx,yuanxiny,banjing,60, '14', '#fdc159');

        DrawText(yuanxinx,yuanxiny,banjing,0, '21', '#fb6376');

        //cans.scale(0.2, 0.2);

    }

    function load()

    {

        dashboard('can');

        dashboard('can1');

    }

 </script>

<body onload="load();" style="width:100%">

    <canvas id="can" width="414px" height="310px"></canvas>

    <canvas id="can1" width="414px" height="310px"></canvas>

</body>

</html>

数学还勉强管用，用代码还能画个canvas 仪表盘(含完整代码)的更多相关文章

  1. 二叉查找树 C++实现（含完整代码）

    一般二叉树的查找是通过遍历整棵二叉树实现,效率较低.二叉查找树是一种特殊的二叉树,可以提高查找的效率.二叉查找树又称为二叉排序树或二叉搜索树. 二叉查找树的定义 二叉排序树(Binary Search ...

  2. Spring Data JPA基本增删改查和JPQL查询（含完整代码和视频连接)

    问题:SpringDataJPA怎么使用? 一.考察目标 主要考核SpringDataJPA的用法 二.题目分析 spring data jpa 的使用步骤(下面有具体实现细节) 1.创建maven工 ...

  3. C语言实现推箱子游戏完整代码

    C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...

  4. java中异常抛出后代码还会继续执行吗

    今天遇到一个问题,在下面的代码中,当抛出运行时异常后,后面的代码还会执行吗,是否需要在异常后面加上return语句呢? public void add(int index, E element){ i ...

  5. ClownFish：比手写代码还快的通用数据访问层

    http://www.cnblogs.com/fish-li/archive/2012/07/17/ClownFish.html 阅读目录 开始 ClownFish是什么? 比手写代码还快的执行速度 ...

  6. location.href 跳转之后，原来位置下面的代码还会继续执行

    location.href 跳转之后,原来位置下面的代码还会继续执行

  7. 除了降低成本和加速数字化转型，低代码还能给企业带来什么价值 ZT

    翻译自:https://dzone.com/articles/measuring-the-roi-of-low-code-1,有删改 低代码 是一种近些年兴起的企业软件快速开发技术和工具.借助低代码使 ...

  8. GitHub C 和 C++ 开源库的清单（含示例代码）

    内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...

  9. 【零基础】AI神经元解析（含实例代码）

    一.序言 关于“深度学习”大部分文章讲的都云里雾里,直到看到“床长”的系列教程以及<深度学习入门:基于Python的理论与实现>,这里主要是对这两个教程进行个人化的总结,目标是让“0基础” ...

随机推荐

  1. mongon命令（转）

    原文:http://www.cnblogs.com/blueness-sunshine/p/6139092.html   连接mongodb: mongo -u --authenticationDat ...

  2. 一条java开发工程师的升级路线,从初级到无语言障碍

    看了一篇文章,讲述的是如何进行后端开发升级,现在分享下,我的总结,感谢写文章的作者大大,觉得他很会坚持,虽然一直在骂人,但是,我觉得人最大的敌人就是懒惰,所以骂得好 现在写下我的总结,希望对有志者有帮 ...

  3. 安装一个Redis

    1. 官网 http://redis.io/ 2.下载 官方不提供windows版本,但https://github.com/MSOpenTech/redis 可以从这里获取64位. 3.

  4. c# Brush、Color、String相互转换

    using System.Windows.Media; 1.String转换成Color Color color = (Color)ColorConverter.ConvertFromString(s ...

  5. HDU1102&&POJ2421 Constructing Roads 2017-04-12 19:09 44人阅读 评论(0) 收藏

    Constructing Roads Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) ...

  6. 提问的智慧——其实你真的不会提问！（转）

    在黑客世界里,当提出一个技术问题时,你能得到怎样的回答?这取决于挖出答案的难度,同样取决于你提问的方法.本指南旨在帮助你提高发问技巧,以获取你最想要的答案.       首先你必须明白,黑客们只偏爱艰 ...

  7. 模拟远程HTTP的POST请求

    建立请求,以模拟远程HTTP的POST请求方式构造并获取处理结果 /// <summary> /// 建立请求,以模拟远程HTTP的POST请求方式构造并获取处理结果 /// </s ...

  8. 使用oracle9的 odbc 连接oracle11

    客户机上基于Oracle 9i的ODBC数据源,无法连接oracle 11G数据库,提示错误为:error ORA-01017, Invalid Username / Password.奇怪的是:sq ...

  9. 1、认识Redis

    Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库, ...

  10. “全栈2019”Java异常第七章：try-catch-finally组合方式

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...