<!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画一个仪表盘自用，自适应的哦的更多相关文章

  1. HTML5 Canvas ( 画一个五角星 ) lineJoin miterLimit

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  3. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  4. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  5. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  6. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  7. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  8. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  9. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

随机推荐

  1. 分布式事务,EventBus 解决方案:CAP【中文文档】（转）

    出处:http://www.cnblogs.com/savorboard/p/cap-document.html 前言 很多同学想对CAP的机制以及用法等想有一个详细的了解,所以花了将近两周时间写了这 ...

  2. ASP.NET 4（和ASP.NET MVC 2）中输出HTML编码的新语法<％：％>

    今天的文章介绍了ASP.NET 4中引入的一个小而且非常有用的新语法功能 - 这是在代码块中自动对输出进行HTML编码的功能.这有助于保护您的应用程序和站点免受跨站点脚本注入(XSS)和HTML注入攻 ...

  3. Linux 基础教程 25-命令和文件查找

    which     不管是在Windows还是Linux系统中,我们都会偶尔执行一些系统命令,比如Windows常见的cmd.ping.ipconfig等,它们的位置都在%systemdrive%中. ...

  4. 深水划水队项目---七天冲刺之day4

    由于有一名队员回家了,所以今天的站立式会议改成微信群线上讨论 工作进度: 1.游戏界面进一步美化中. 2.游戏基本功能已经初步实现. 3.计划今天内商讨出如何实现游戏中的难度选择功能与道具功能. 工作 ...

  5. [LeetCode 题解]: Rotate List

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...

  6. IIS 8 nodejs + iisnode 配置

    最近再Server 2012 + IIS 8 中配置NodeJS 运行环境,具体配置过程就不细说了(随便搜搜一堆),安装完nodejs 和 iisnode 之后,出现一个报错,如下: The iisn ...

  7. VC6.0快捷键一览表

    F1 显示帮助,如果光标停在代码的某个字符上,显示MSDN中相应的帮助内容 F2 书签功能: Ctrl+F2 –在某行设置一个书签(再按一次次是取消) F2 –跳到下一个书签位置 Shift+F2 – ...

  8. C#——Winform 无边框随意拖动【转载】

    本篇技术内容转载自:http://www.cnblogs.com/ap0606122/archive/2012/10/23/2734964.html using System; using Syste ...

  9. WPF：MVVM模式下ViewModel关闭View

    不外乎两种基本方法. 消息通知和参数传递. 一.消息通知 利用View里的IsEnable属性 原理是这样的: 1.UI中的IsEnabled绑定VM中的属性 2.UI的后台代码中,注册IsEnabl ...

  10. c# in out ref关键字

    class in_out_ref { #region in 关键字 delegate void DContravariant<in A>(A argumen); static void o ...