没事用html5 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">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
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 = $$('can');
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 Drawscaleline(yuanxinx,yuanxiny, banjing, kaishijd, jieshujd, dengfen, yanse)
{
var can = $$('can');
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 = $$('can');
var cans = can.getContext('2d');
cans.font = "bold 10px Arial";
cans.strokeStyle = g;
cans.fillStyle = g;
x1 = yuanxinx + banjing * Math.cos((jiaodu * 3.14)/180.0);
if (jiaodu>90)
x1 = x1 +10;
else
x1 = x1-18;
y1 = yuanxiny - banjing *Math.sin((jiaodu * 3.14)/180.0);
cans.fillText(text,x1,y1);
} function load()
{
var can = $$('can');
var banjing = (can.width/2);
var yuanxinx = can.width/2;
var yuanxiny = can.height/2;
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'); 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 pageLoad1(){
var myCanvas = document.getElementById("can");
var context = myCanvas.getContext("2d");
var wise = true; context.lineWidth = 3;
context.strokeStyle = "blue";
context.fillStyle = "red";
for(var i=1;i<5;i++)
{
for(var j=1;j<4;j++)
{
context.beginPath();
context.arc(j*100,i*100,40,0,j*2/3*Math.PI,wise);
if(1 == i||3 == i)
context.stroke();
else
context.fill();
wise = !wise;
}
}
}
</script>
<body onload="load();">
<canvas id="can" width="280px" height="480px"></canvas>
</body>
</html>
没事用html5 canvas画一个仪表盘自用,自适应的哦的更多相关文章
- HTML5 Canvas ( 画一个五角星 ) lineJoin miterLimit
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- CSS3进度条 和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
- 用canvas画一个的小画板(PC端移动端都能用)
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
随机推荐
- Oracle E-Business Suite并发请求的优先级(Concurrent Request Priority)
不少用户抱怨自己的Oracle E-Business Suite并发请求(Concurrent Request)提交了好久,但还是一直在排队,等了好久还没有执行.用户希望对于一些重要性程度高.响应要求 ...
- nginx 用户登录认证
1.配置nginx server { listen ; server_name kibana.×××.com; location / { auth_basic "secret"; ...
- CentOS 新系统后配置
1. 网络配置 略 1.2 ip_froward 查看 sysctl -a | grep ip_ 修改 vi /etc/sysctl.conf net.ipv4.ip_forward = 1 最大使用 ...
- Javascript设计模式理论与实战:简单工厂模式
通常我们创建对象最常规的方法就是使用new关键字调用构造函数,这会导致对象之间的依赖性.工厂模式是一种有助于消除类之间依赖性的设计模式,它使用一个方法来决定要实例化哪一个类.本文详细介绍了简单工厂模式 ...
- 执行计划--在存储过程中使用SET对执行计划的影响
--如果在存储过程中定义变量,并为变量SET赋值,该变量的值无法为执行计划提供参考(即执行计划不考虑该变量),将会出现预估行数和实际行数相差过大导致执行计划不优的情况--如果在存储过程中使用SET为存 ...
- scala 删除一个文件夹以及其子目录和文件
/** * 删除一个文件夹,及其子目录 @param dir */ def deleteDir(dir: File): Unit = { val files = dir.listFiles() fil ...
- Spring @SCHEDULED(CRON = "0 0 * * * ?")实现定时任务
Spring配置文件xmlns加入 xmlns:task="http://www.springframework.org/schema/task" xsi:schemaLocati ...
- Linux基础命令(一)
Linux语法命令 [选项] 参数注意:[]内容是对命令的扩张1.命令中单词之间空格隔开2.单行命令最多256个字符3.大小写区分 clear 清屏pwd 查看当前目录cd 切换目录 .表示当前 ...
- html实现时间输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 鸡肋点搭配ClickJacking攻击-获取管理员权限
作者:jing0102 前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞.本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程.但在说明过程之前,先带大家了解一下ClickJac ...