<!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. Unable to resolve target 'android-XX'解决办法

    在搭建好安卓编译环境后,我用Eclipse导入冲git上下载的安卓源码编译时,会提示 Unable to resolve target 'android-17' 等 “Unable to resolv ...

  2. Web浏览器兼容性测试工具如何选择

    对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很 ...

  3. mac下sublime 配置查看源码

    sublime及package control的安装查看之前一篇文章:http://www.cnblogs.com/xdwa/p/5805101.html 安装ctags 安装完毕package co ...

  4. Javascript/js的相等和不等运算符（= 、== 、===）

    "=="和"==="运算符用于比较两个值是否相等,当然它们对相等的定义不尽相同.两个运算符允许任意类型的操作数,如果操作数相等则返回tru,否则返回false. ...

  5. ubuntu 压缩软件

    7-zip 安装: sudo apt-get install p7zip-full 使用方法: 7z x file file是你要解压的文件名 更多使用方法: man 7z rar sudo apt- ...

  6. ArcGIS API for JavaScript 4.2学习笔记[4] 第二章其余感兴趣的例子

    先马克,估计要用到的有: 视图存档 2D地图添加指南针 视图移动 鹰眼 2D3D视图同步.同视图不同数据同步 以后实战的时候再仔细研究研究.

  7. 微信前端面试题----js实现LazyMan

    这是微信小程序的一道面试题,题目是这样的: 实现一个LazyMan,可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank! LazyMan(& ...

  8. 将图片保存成png 或者jpg格式

    -(void)saveImage:(UIImage*)image{    NSString  *pngPath = [NSHomeDirectory() stringByAppendingPathCo ...

  9. SQL Server-聚焦事务对本地变量、临时表、表变量影响以及日志文件存满时如何收缩（三十一）

    前言 接下来我们将SQL Server基础系列还剩下最后几节内容结束,后续再来讲解SQL Server性能调优,我们开始进入主题. SQL Server事务对本地变量影响 事务对变量影响具体是指什么意 ...

  10. didReceiveMemoryWarning-内存警告处理方法-iOS

    前言 当app出现内存警告的时候会怎么办 正文 ios6.0之后,内存警告的viewDidUnload 被屏蔽,即又回到了ios3.0的时期的内存管理方式. iOS6.0及以上版本的内存警告:调用di ...