<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>canvas绘图小实例之方块移动</title>
 <style>
 body{ background:#000;}
 #canvas1{ margin:100px 500px; background:#fff;}
 #canvas1 span{ color:#fff;}
 </style>
 <script>
 window.onload = function(){
     var oCanvas = document.getElementById('canvas1');
     var oContext = oCanvas.getContext('2d');    //获取绘图的2d环境

     function tick(){
         oContext.clearRect(0,0,oCanvas.width,oCanvas.height);
        　　　　　　//画表盘
         oContext.beginPath();
         for(var i=0;i<60;i++){
             oContext.moveTo(300,300);
             oContext.arc(300,300,200,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
         }
         oContext.stroke();

         oContext.beginPath();
         oContext.arc(300,300,200*0.9,0,360*Math.PI/180,false);
         oContext.fillStyle= "white";
         oContext.fill();

         oContext.beginPath();
         for(var i=0;i<12;i++){
             oContext.moveTo(300,300);
             oContext.arc(300,300,200,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
         }
         oContext.lineWidth = 3;
         oContext.stroke();

         oContext.beginPath();
         oContext.arc(300,300,200*0.87,0,360*Math.PI/180,false);
         oContext.fill();

         //获取时间
         var oDate = new Date();
         var oHour = oDate.getHours();
         var oMin = oDate.getMinutes();
         var oSec = oDate.getSeconds();

         var degHour = (-90+oHour*30+oMin/2)*Math.PI/180;
         var degMin = (-90+oMin*6)*Math.PI/180;
         var degSec = (-90+oSec*6)*Math.PI/180;
     　　　　　　　　 //画时针
         oContext.beginPath();
         oContext.moveTo(300,300);
         oContext.arc(300,300,200*0.5,degHour,degHour,false);
         oContext.lineWidth = 5;
         oContext.stroke();
         //画分针
         oContext.beginPath();
         oContext.moveTo(300,300);
         oContext.arc(300,300,200*0.7,degMin,degMin,false);
         oContext.lineWidth = 3;
         oContext.stroke();
         //画秒针
         oContext.beginPath();
         oContext.moveTo(300,300);
         oContext.arc(300,300,200*0.8,degSec,degSec,false);
         oContext.lineWidth = 1;
         oContext.stroke();
     }

     tick();
     setInterval(tick,1000);

 }
 </script>
 </head>

 <body>
 <canvas id="canvas1" width="600" height="600">
     <span>该浏览器不支持canvas</span>
 </canvas>
 </body>
 </html>

HTML5自学笔记[ 15 ]canvas绘图实例之钟表的更多相关文章

  1. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

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

  2. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

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

  3. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

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

  4. HTML5自学笔记[ 15 ]canvas绘图基础6

    关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...

  5. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  8. HTML5自学笔记[ 24 ]canvas绘图之星空草地

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

  9. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

随机推荐

  1. Django serializers 序列化 rest_framework

    参考官方文档1(你懂的):http://www.django-rest-framework.org/api-guide/serializers/ 参考官方文档2(你懂的):http://www.dja ...

  2. C#窗体->>随机四则运算

    用户需求: 程序能接收用户输入的整数答案,并判断对错程序结束时,统计出答对.答错的题目数量.补充说明:0——10的整数是随机生成的用户可以选择四则运算中的一种用户可以结束程序的运行,并显示统计结果.在 ...

  3. fzu 1015 土地划分（判断线段相交+求出交点+找规律）

    链接:http://acm.fzu.edu.cn/problem.php?pid=1015  Problem 1015 土地划分 Accept: 714    Submit: 1675Time Lim ...

  4. mac 配置jdk maven

    1.从oracle下载jdk 链接:http://www.oracle.com/technetwork/java/javase/downloads/index.html 然后安装jdk 2.下载Mav ...

  5. 关于dom ready事件

    0.加载完页面,解析完所有标签(不包括执行CSS和JS),并如规范中所说的设置 interactive 和执行每个静态的script标签中的JS,然后触发. 1.没有js,有css,有img,DOMC ...

  6. 手动配置WCF宿主的.config文件遇到的几种错误

    今天尝试用控制台应用程序作为WCF宿主,遇到几个问题,这几个问题虽然都不难,但寻找解决方案相当费时费力,做记录. WCF标准的配置文件为: <system.serviceModel>    ...

  7. C# ？（问号）的三个用处（转载）

    public DateTime? StatusDateTime = null; 脑子便也出现个问号,这是什么意思呢?网上搜下,总结如下: 1. 可空类型修饰符(?): 引用类型可以使用空引用表示一个不 ...

  8. Oracle的热备份

    一. 什么是热备份 热备份也叫联机备份,它是指数据库处于open状态下,对数据库的数据文件.控制文件.参数文件.密码文件等进行一系列备份操作(其中数据文件是必须备份的). 它要求数据库处在归档模式下. ...

  9. Debian8系统下，caffe的安装

    特此声明:本文不允许用于商业目的,允许转载(注明一下啦). 首先,官方的参考文献为:http://caffe.berkeleyvision.org/installation.html. 现在开始: 安 ...

  10. linux下，一些关于动态库的问题：

    程序运行是加载动态库的几种方法: 第一种,通过ldconfig命令    ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令它,ldconfig命令通 ...