<!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++ stl string char* 向 string 转换的问题

    请看下面代码 string AddString(const string& a,const string & b) { return a + b; } int _tmain(int a ...

  2. 【转载】STL"源码"剖析-重点知识总结

    原文:STL"源码"剖析-重点知识总结 STL是C++重要的组件之一,大学时看过<STL源码剖析>这本书,这几天复习了一下,总结出以下LZ认为比较重要的知识点,内容有点 ...

  3. jquery ajax请求时，设置请求头信息

    设置一个名为 headers 的参数 参考代码: // attempt to make an XMLHttpRequest to indeed.com // jQuery 1.6.1 and Chro ...

  4. netstat -ano，查看已占用端口,结束已被占用的端口,ntsd,关闭任务管理器杀不了的进程

    cmd——回车,输入netstat -ano——回车,可以查看已占用的端口,记下端口的PID,然后打开任务管理器,点查看,选择列,勾选PID确定,找到对应的PID,结束进程,如果结束不了或者结束后还不 ...

  5. JAVA排序--[冒泡排序]

    package com.array; public class Sort_MaoPao { /** * 项目名称:冒泡排序 * 项目要求:用JAVA对数组进行排序,并运用冒泡排序算法 * 作者:Sev ...

  6. CSS笔记（十五）CSS3之用户界面

    参考:http://www.w3school.com.cn/css3/css3_user_interface.asp 在 CSS3 中,新的用户界面特性包括重设元素尺寸.盒尺寸以及轮廓等. 新的用户界 ...

  7. STL--set

    set-概述: 集合Set是一个容器,它其中所包含的元素的值是唯一的.集合中的元素按一定的顺序排列,并被作为集合中的实例. 一个集合通过一个链表来组织,其具体实现采用了红黑树的平衡二叉树的数据结构. ...

  8. myeclipse10.05安装aptana

    安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...

  9. jsp get方式请求参数中包含中文乱码问题解决

    1. 自己接收到参数之后在后台进行转码处理 2: 修改tomcat的配置文件  server.xml <Connector port="8080" protocol=&quo ...

  10. 从POI到O2O 看百度地图如何走出未来之路

    近期O2O的烧钱融资大战如火如荼,有人已经把O2O大战,用乌合之众的群体心理失控来形容.其实厂商都不傻,O2O烧钱大家都知道,但是大家还知道O2O背后这块大蛋糕价值"万亿级". 有 ...