把最近学到的一些canvas技能全部发上来，刚开始写博客，感觉还不太习惯，不过我相信慢慢就会习惯了。不啰嗦了，把代码送上，看不懂的话可以先去学习下基础教程，把基础学好了也就能看懂了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" width="500" height="500">你的浏览器不支持canvas</canvas>

    <script>

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        function clock(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        var date = new Date();

        var s = date.getSeconds();

        var m = date.getMinutes();

        var h = date.getHours();

        var r = canvas.width/2.5;  //半径

        ctx.save();

        ctx.translate(250,250);//平移之后坐标系跟着变化

        ctx.rotate(-Math.PI/2);//旋转之后坐标系跟着变化

        ctx.save();// 记录旋转画布之前初始状态

        ctx.lineWidth = 3;

        ctx.strokeStyle = "#CCCCCC";

        //分刻度

        for(var i = 0;i < 60;i++ ){

            ctx.beginPath();

            ctx.rotate(Math.PI/30);

            ctx.moveTo(165,0);

            ctx.lineTo(180,0);

            ctx.stroke();

        }

        ctx.restore();// 恢复初始状态，未旋转前

        ctx.save();

        ctx.lineWidth = 5;

        ctx.strokeStyle="black";

        //时刻度

        for (var i = 0; i < 12; i++) {

            ctx.beginPath();

            ctx.rotate(Math.PI/6);// 旋转画布绘制刻度

            ctx.moveTo(155,0);

            ctx.lineTo(180,0);

            ctx.stroke();

        }

        ctx.restore();

        ctx.save();

        //秒针

        ctx.strokeStyle = "blue";

        ctx.lineWidth = 2;

        ctx.beginPath();

        ctx.rotate(s*Math.PI/30);

        ctx.moveTo(-40,0);

        ctx.lineTo(170,0);

        ctx.stroke();

        ctx.restore();

        ctx.save();

        //分针

        ctx.strokeStyle = "black";

        ctx.lineWidth = 3;

        ctx.beginPath();

        ctx.rotate((m*Math.PI/30) + (s*Math.PI/1800));

        ctx.moveTo(-30,0);

        ctx.lineTo(160,0);

        ctx.stroke();

        ctx.restore();

        ctx.save();

        //时针

        ctx.strokeStyle = "red";

        ctx.lineWidth = 4;

        ctx.beginPath();

        ctx.rotate((h*Math.PI/6)+(m*Math.PI/360) + (s*Math.PI/21600));

        ctx.moveTo(-10,0);

        ctx.lineTo(150,0);

        ctx.stroke();

        ctx.restore();

        ctx.beginPath();

        ctx.arc(0,0,5,0,360,false);

        ctx.closePath();

        ctx.fillStyle = "#ebebeb";

        ctx.fill();

        ctx.stroke();

        ctx.restore();

        //添加数字

        for(i = 0;i<12;i++){

            angle = i * 30;

            // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位

            angle = angle*Math.PI/180;;

            font = (i + 3 > 12)?i+3-12 : i+3;

            fontX = 244+Math.round(Math.cos(angle)*(r-60));

            fontY = 256+Math.round(Math.sin(angle)*(r-60));

            ctx.font = 'bold 14px 微软雅黑';

            ctx.fillText(font+'',fontX,fontY);

        }

        ctx.restore();

        window.requestAnimationFrame(clock);

        //外圆框

        ctx.lineWidth=4;

        ctx.strokeStyle="gray";

        ctx.beginPath();

        ctx.arc(250,250,r,0,Math.PI*2,true);

        ctx.stroke();

        ctx.restore();

        ctx.restore();

        }

        window.requestAnimationFrame(clock);

        clock ();

    </script>

</body>

</html>

效果图：

canvas-绘制时钟的更多相关文章

  1. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  2. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  3. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  4. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  5. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  6. 用canvas绘制时钟

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

  7. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  8. 使用canvas绘制时钟 （http://heeroluo.net/Article/Detail/95）

    准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></di ...

  9. canvas绘制时钟及注释及save和restore的用法

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

  10. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. POJ 1077 && HDU 1043 Eight A*算法,bfs,康托展开,hash 难度:3

    http://poj.org/problem?id=1077 http://acm.hdu.edu.cn/showproblem.php?pid=1043 X=a[n]*(n-1)!+a[n-1]*( ...

  2. Python中通过多个字符分割（split）字符串的方法

    python中字符串自带的split方法一次只能使用一个字符对字符串进行分割,但是python的正则模块则可以实现多个字符分割 import re re.split('-|_','sharejs_ha ...

  3. 编译哈工大语言技术平台云LTP（C++）源码及LTP4J（Java）源码

    转自:编译哈工大语言技术平台云LTP(C++)源码及LTP4J(Java)源码 JDK:java version “1.8.0_31”Java(TM) SE Runtime Environment ( ...

  4. MATLAB 函数

    MATLAB函数大全 1.常见 http://wenku.baidu.com/link?url=tPpwD7Ox_1sG-SQv_XdYszBAPY9LX_Zb_dde_5JeOiu7RwN_i14X ...

  5. 【个人使用.Net类库】前言

    个人接触.Net是在2013年8月份到了一家新的公司开始的. 目前为止,发现自己的知识储备如下: 基本的WinForm编程,但没做过对应项目. 基本的Asp.Net页面,做过查询.树形菜单.登录的小功 ...

  6. Highcharts导出gb2312乱码问题

    Highcharts是utf-8编码的,其本地的.net导出环境也是utf-8格式的,导致网页如果采用gb2312编码,显示正常,导出就乱码了.这种现象也同样经常出现在ajax的使用过程中. ajax ...

  7. Mvc学习--1

    1.缓存机制[OutputCache(Duration=10)] 后面的 duration 表示缓存时间 直接放在action上面 是一个特性2.文件上传 @using (Html.BeginForm ...

  8. xlistview的java（头）

    package com.bwie.xlistviews; import com.bwie.test.R; import android.content.Context;import android.u ...

  9. hql抓取要注意的点

    fetchtype是lazy,那就用到了在通过缓存中的关联去取,用不到不取:lazy遇到joinfetch就失去意义,但是由于hql语句是自己编写的,可以控制加不加fetch 所以如果主力是hql语句 ...

  10. Map的遍历

    @Test public void test() { Map<String,String> usersmap = new HashMap<>(); usersmap.put(& ...