数学还勉强管用,用代码还能画个canvas 仪表盘(含完整代码)
<!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 仪表盘(含完整代码)的更多相关文章
- 二叉查找树 C++实现(含完整代码)
一般二叉树的查找是通过遍历整棵二叉树实现,效率较低.二叉查找树是一种特殊的二叉树,可以提高查找的效率.二叉查找树又称为二叉排序树或二叉搜索树. 二叉查找树的定义 二叉排序树(Binary Search ...
- Spring Data JPA基本增删改查和JPQL查询(含完整代码和视频连接)
问题:SpringDataJPA怎么使用? 一.考察目标 主要考核SpringDataJPA的用法 二.题目分析 spring data jpa 的使用步骤(下面有具体实现细节) 1.创建maven工 ...
- C语言实现推箱子游戏完整代码
C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...
- java中异常抛出后代码还会继续执行吗
今天遇到一个问题,在下面的代码中,当抛出运行时异常后,后面的代码还会执行吗,是否需要在异常后面加上return语句呢? public void add(int index, E element){ i ...
- ClownFish:比手写代码还快的通用数据访问层
http://www.cnblogs.com/fish-li/archive/2012/07/17/ClownFish.html 阅读目录 开始 ClownFish是什么? 比手写代码还快的执行速度 ...
- location.href 跳转之后,原来位置下面的代码还会继续执行
location.href 跳转之后,原来位置下面的代码还会继续执行
- 除了降低成本和加速数字化转型,低代码还能给企业带来什么价值 ZT
翻译自:https://dzone.com/articles/measuring-the-roi-of-low-code-1,有删改 低代码 是一种近些年兴起的企业软件快速开发技术和工具.借助低代码使 ...
- GitHub C 和 C++ 开源库的清单(含示例代码)
内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...
- 【零基础】AI神经元解析(含实例代码)
一.序言 关于“深度学习”大部分文章讲的都云里雾里,直到看到“床长”的系列教程以及<深度学习入门:基于Python的理论与实现>,这里主要是对这两个教程进行个人化的总结,目标是让“0基础” ...
随机推荐
- win2003 ent 64 + mssql ent 64
1.打win2003补丁(取消IE8.0)2.msconfig->boot.int->高级中,将内核改成83.将cd1,cd2,高到Servers,Tools目录中,并保证Servers, ...
- python sublime run快捷键设置
一.Ctrl+Shift+P进行插件“sublimeREPL”安装 二.打开preferences->Key Binding-User,写入以下内容 [ { "keys": ...
- JScript 对象 <|> JSON
<script type="text/javascript"> function test(){ var array = [{"id":1},{&q ...
- Restful风格wcf调用3——Stream
写在前面 上篇文章介绍了restful接口的增删改查,本篇文章将介绍,如何通过数据流进行文件的上传及下载操作. 系列文章 Restful风格wcf调用 Restful风格wcf调用2——增删改查 一个 ...
- Excel2010画动态甘特图
哈哈!你居然真的看简介点进来啦,我也想八一八Henry gantt本人的故事,可是我查了好些资料,一个槽点都没有发现,不过人生经历还是蛮拼的: 此人活了58年,前半生就是一个中规中距的机械工程师&am ...
- 初步理解IOC和DI和AOP模式
初步理解IOC和DI和AOP模式 控制反转(IOC) 控制反转(IOC,Inversion of Control)是一种转主动为被动关系的一种编程模式,有点类似于工厂模式,举个栗子, 下面这个这不是I ...
- Cesium Language (CZML) 入门2 — CZML Content(CZML的内容)
原文:https://github.com/AnalyticalGraphicsInc/cesium/wiki/CZML-Content 以下是描述CZML文档或者流中可能存在的内容.要解释CZML文 ...
- util.Date转化成sql.date格式
https://www.cnblogs.com/zhaotiancheng/p/6413067.html
- NOIP2015BLOCKADE c++ 代码
#include<algorithm> #include<fstream> #include<functional> #include<iostream> ...
- Python3.5 学习一
初期学习,离不了环境搭建及语言的基本语法等. Python属于动态解析.跨平台. 前期了解了Pyhon环境搭建,在Linux(ubuntu)和windows上都有所学习了解,由于不再当前所学资料教程内 ...