<!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. Target runtime Apache Tomcat v8.0 is not defined.

    Target runtime Apache Tomcat v8.0 is not defined. Window-Preference-MyEclipse-Targeted Runtimes,选择存在 ...

  2. linux脚本: 后台启动程序并重定向输出信息脚本

    后台启动程序并重定向输出信息脚本 新建文件mstart, 写入下面代码. #!/bin/bash $1 1>/etc/null 2>&1 & 说明 1>/etc/nu ...

  3. oracle sql 知识小结

    Oracle_sql : 第一单元:select 语句: ①:字符串连接操作符: || ②:去除重复行:distinct   第二单元:条件限制和排序 ①:关键字:where ②:比较操作符:=,&g ...

  4. 《JAVASCRIPT高级程序设计》第四章

    javascript变量是松散类型,它只是在特定时间表示特定值的一个名字而已:变量的值以及类型,可以在脚本的生命周期内改变.变量的类型,分为基本类型和引用类型两种,具体介绍如下图所示: 执行环境是Ja ...

  5. NMEA-0183协议解析

    NMEA-0183 NMEA 0183是美国国家海洋电子协会(National Marine Electronics Association )为海用电子设备制定的标准格式.目前业已成了GPS导航设备 ...

  6. 详谈Struts2

    介绍struts2: struts2是一个基于mvc设计模式的web层框架. 详谈struts2的执行流程: struts2的执行流程:用户发送请求---->首先经过Struts2的核心过滤器- ...

  7. FindPkgConfig----CMake的pkg-config模块

    FindPkgConfig A pkg-config module for CMake. CMake的pkg-config模块. Finds the pkg-config executable and ...

  8. 利用nodejs监控文件变化并使用sftp上传到服务器

    很久没写博客了,因为最近在用react+express做一个自己的工具型网站(其实就是夺宝岛抢拍器) 然后因为经常要改动,而且又要放到服务器上进行测试.总是要webpack,然后手动把文件上传上去,不 ...

  9. Sublime Text 3 修改配色主题【侧边框之...】

    Sublime Text3 是挺喜欢的一款编辑器,一周五天朝九晚六面对,而默认的侧边栏颜色总显得不尽人意.右侧的代码高亮[color_scheme:Monokai]挺喜欢的,心里就想着如何把侧边栏也给 ...

  10. 一个不错的windows编程网址

    http://www.zklmc.com/ 含有MFC,C#,web开发资料