<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="500px" height="500px" id="canvas" style="background: yellow"></canvas>
    <script>
        var canvas = document.getElementById('canvas'); //通过id获取画布
        var cxt = canvas.getContext('2d'); //getContext获取绘图环境
        function drawClock(){      //获取时间
            var now = new Date();   //定义时间
            var sec = now.getSeconds();  //获取秒
            var minute = now.getMinutes();  //获取分钟
            var hourOne = now.getHours();   //获取小时
            var hourTwo = hourOne + minute/60;      //小时必须获取浮点类型，产生偏移（小时+分钟比）
            var hour = hourTwo >12?hourTwo-12:hourTwo;        //将24小时转换为12小时
            cxt.beginPath();  //画笔开始
            cxt.lineWidth = 5;  //设置画笔的线宽
            cxt.strokeStyle = ['#000'];  //设置画笔的颜色
            var my_gradient=cxt.createRadialGradient(250,250,225,250,250,250);
            my_gradient.addColorStop(0,"#ccc");
            my_gradient.addColorStop(1,"#FEC627");
            cxt.fillStyle=my_gradient;
            cxt.arc(250,250,250,0,360,false);//绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
            cxt.fill();
            cxt.stroke();   //绘图
            cxt.closePath();  //结束画布
            for(var i=0; i<12; i++){
                cxt.save();          //保存当前环境的状态
                cxt.lineWidth=7;
                cxt.strokeStyle="#000";          //设置异次元空间原点
                cxt.translate(250,250);          //设置旋转角度
                cxt.rotate(i*30*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-170); //画线， 从坐标0，-170开始
                cxt.lineTo(0,-190); //到坐标0，-190结束
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
            }          //分针刻度
            for(var i=0; i<60;i++){
                cxt.save();
                cxt.lineWidth=5;
                cxt.strokeStyle="#000";
                cxt.translate(250,250);
                cxt.rotate(i*6*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-180);
                cxt.lineTo(0,-190);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
            }                              //时针
            cxt.save();     //时针样式
            cxt.lineWidth = 7;
            cxt.strokeStyle="#000";
            cxt.translate(250,250);
            cxt.rotate(/*hour**/30*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-140);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();                   //分针
            cxt.save();     //分针样式
            cxt.lineWidth = 5;
            cxt.strokeStyle="#000";
            cxt.translate(250,250);
            cxt.rotate(/*minute**/6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-160);
            cxt.lineTo(0,15);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();//         秒针
            cxt.save();
            cxt.lineWidth = 3;
            cxt.strokeStyle="#f00";
            cxt.translate(250,250);
            cxt.rotate(/*sec**/60*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-185);
            cxt.lineTo(0,20);
            cxt.stroke();
            cxt.closePath(); //画出时针，分针，秒针交叉点
            cxt.beginPath();
            cxt.strokeStyle="#f00";
            cxt.arc(0,0,5,0,360,false);
            cxt.fillStyle="#fff";   //填充颜色
            cxt.fill();   //填充
            cxt.stroke();
            cxt.closePath();                   //秒针装饰
            cxt.beginPath();
            cxt.strokeStyle="#f" + "0";
            cxt.arc(0,-160,5,0,360,false);
            cxt.fill();
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        setInterval(drawClock,1000); //使用setinterval();让时钟动起来
    </script>
</body>
</html>

canvas作图的更多相关文章

  1. Html5使用canvas作图

    以下例子是项目中实际用到的.不足之处请大家指正,设计到画线,写文字,填充,文字旋转. <!DOCTYPE html> <html> <head lang="en ...

  2. Html5使用canvas作图线宽很粗

    自己使用canvas画图是碰到的问题,在这里记录一下.我把lineWidth设置为1,但是很粗,而且发虚.代码如下: <script type="text/javascript&quo ...

  3. canvas图像模糊以及图像变形问题

    问题:有时用canvas作图时发现图像会出现模糊不清晰的问题,甚至做出来的图呈现出的效果与我们给的数值所应该呈现出的效果不一致 原因:当你在支持html5 canvas的浏览器下查看页面的时候,can ...

  4. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  5. Node学习笔记（三）：基于socket.io web版你画我猜（二）

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  6. Node学习笔记（三）：基于socket.io web版你画我猜（一）

    经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...

  7. "无需开发经验" 也能拥有小程序

    本文分享嘉宾:毛帅,又拍图片管家资深开发工程师,主要负责又拍图片管家.图管小程序第三方平台.图管小程序等项目的开发.维护及拓新工作.熟悉 JS / C++ 等语言,有丰富的 NodeJS 开发经验,热 ...

  8. HTML5-canvas实例：2D折线数据图与2D扇形图

    基础知识: <canvas id="demo" width="400" height="400"></canvas> ...

  9. Canvas: 优雅的代码作图系列：中国国旗

    Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...

随机推荐

  1. Flex移动皮肤开发(二)

    范例文件 mobile-skinning-part2.zip 在这个讨论创建 Flex 移动 skin 的系列的 第 1 部分 中,我讨论了 Flex 团队在 Mobile 主题中所做的性能优化的原理 ...

  2. Linux笔记（十一） - 文件系统管理

    (1)文件系统查看命令:df [选项] [挂载点]-a 显示所有文件系统信息,包括特殊文件系统,如/proc /sysfs-h 使用习惯单位显示容量,如KB,MB或GB-T 显示文件系统类型-m 以M ...

  3. Nancy简单实战之NancyMusicStore(二)：打造首页

    前言 继上一篇搭建好项目之后,我们在这一篇中将把我们NancyMusicStore的首页打造出来. 布局 开始首页之前,我们要先为我们的整个应用添加一个通用的布局页面,WebForm中母版页的概念. ...

  4. POJ1088(dp)

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 91574   Accepted: 34573 Description ...

  5. python之FTP程序(支持多用户在线)

    转发注明出处:http://www.cnblogs.com/0zcl/p/6259128.html 一.需求 1. 用户加密认证 (完成)2. 允许同时多用户登录 (完成)3. 每个用户有自己的家目录 ...

  6. 利用享元模式来解决DOM元素过多导致的网页解析慢、卡死的问题

    我也不知道应该为本文的思路取一个什么比较恰当的标题,但是感觉符合享元模式的思路. 在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). ...

  7. Docker 1.13 管理命令

    1.12 CLI 的问题 Docker1.12 命令行接口(CLI)有40多个顶级命令,这些命令存在以下问题: 没有归类组织,这让docker 新手很难学习: 有些命令没有提供足够的上下文环境,以至于 ...

  8. css3 3d 与案例分析

    作者:魔洁 聊到3d那我们就先聊聊空间维度,首先一维,比如一条线就是一个一维空间,连点成线在这个空间里这些点只能前进后退,二维空间就是一个平面,这时点不仅可以前进后退还可以左右移动,3维空间也可以说是 ...

  9. final对于访问效率的影响

    在能够通过编译的前提下,无论局部变量声明时带不带final关键字修饰,对其访问的效率都一样. 并且:重复访问一个局部变量比重复访问一个成员或静态变量快:即便将其final修饰符去掉,效果也一样. 例如 ...

  10. Pycharm安装及遇到的问题

    趁寒假想自学一下python语言,有人推荐eclipse+pydev但是因为java编程用了eclipse,不太想一个IDE用于多种语言开发(个人喜好),于是就下载了Pycharm,之间安装了也遇到了 ...