<!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. 工厂模式在JS中的实践

    .mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...

  2. Swift3.0服务端开发(五) 记事本的开发（iOS端+服务端）

    前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...

  3. [源代码] SailingEase .NET Resources Tool （.NET 多语言资源编辑器）

    我在2016年10月发过一篇博客,介绍了我写过的一个多语言资源文件编辑器,并且做为免费软件发布给了出来. 陆续收到了一些朋友的反馈,有朋友很热心提了很多建议和关心的话,还有朋友发红包过来,让我很感动. ...

  4. 将 ext_net 连接到 router - 每天5分钟玩转 OpenStack（145）

    上一节完我们创建了外部网络 ext_net,接下来需要将其连接到 Neutron 的虚拟路由器,这样 instance 才能访问外网. 点击菜单 Project -> Network -> ...

  5. Iris的R语言命令工具箱(1)

    Iris的R语言命令工具箱(1) 最近在做数据分析,使用了R语言做了些数据处理和可视化,在此记下遇到过的问题.应用过的命令.处理方式以及工具包- *版权声明:本文为博主原创文章,转载请注明本文地址.h ...

  6. HDU 2092 整数解

    整数解 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  7. 笔记之《用python写网络爬虫》

    1 .3 背景调研 robots. txt Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站 ...

  8. Kafka 0.10 Producer网络流程简述

    1.Producer 网络请求 1.1 Producer Client角度 KafkaProducer主要靠Sender来发送数据给Broker. Sender: 该线程handles the sen ...

  9. 腾讯X5内核使用 Android WebView 的一些小问题

    大家好,我是博客小白,第一篇文章,文笔不好,务喷,希望能给各位提供点帮助 公司做个商城,然后我就简单的做个启动引导页,然后用个原生WebView套一下,加个加载动画,解决下第三方登录支付的返回问题,这 ...

  10. Java-8ATM

    源代码: import java.util.Scanner;interface fangfa{ public void show();public void qukuan();public void ...