<!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. C#开发COM组件

    1.每个COM组件所有对外公布的方法都必须通过接口形式实现: 2.由于.Net下编译的COM组件并等同于C编译的COM组件,所以存在必须在运行目标机器注册的情况,对此.Net下编译的COM组件必须为程 ...

  2. sql 自增字段的控制 hibernate注解的写法

    1 创建序列,新建了一个列作为主键 create sequence pbaseinfo INCREMENT BY 1 START WITH 1 NOMAXVALUE NOCYCLE NOCACHE; ...

  3. 【转载】跟着9张思维导图学习JavaScript

    原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小ti ...

  4. Java_JDK_TreeMap

    (一)TreeMap TreeMap使用的是红黑树来实现的,所以重点是红黑树的插入和删除. 红黑树的3个特性: 根节点和所有外部节点的颜色都是黑色的: 从根节点到外部节点的途中没有连续两个节点的颜色是 ...

  5. choco命令

    C:\Users\Administrator>chocoChocolatey v0.10.0 C:\Users\Administrator>choco --version0.10.0 C: ...

  6. Limiting To Select Only 5 Check Boxes Out Of Ten In Oracle Forms

    Suppose you want to give an option to user to select only 5 check boxes from given any number of che ...

  7. GBrowse配置相关资料

    GBrowse配置相关资料(形状.颜色.配置.gff3) http://gmod.org/wiki/Glyphs_and_Glyph_Optionshttp://gmod.org/wiki/GBrow ...

  8. gitlab配置和搭建 ssh

    (1)查看自己之前是否生成过ssh密钥: cat ~/.ssh/id_rsa.pub 如果出现一段ssh-rsa开头的,表示已经生成了,可以跳过此步骤: (2)如果之前没有生成ssh密钥,使用命令: ...

  9. ARM家族大检阅

    首先列举下几个名称: 6410 2440 210 A8 ARM9 ARM11 ARMv7 ARMv6 进行分类: 1.芯片名称: 2440 6410 210 2.ARM核: A8 ARM9 ARM11 ...

  10. Shell概述

    一,Shell原理