canvas钟表

canvas是绘制图形的一个api,也可以用来制作h5小游戏

canvas时间表用到的技术点如下:

DOMobj.getContext("2d");  // 获取2D环境, 创建画布

beginPath();  // 起始一条路径,或重置当前路径

closePath();  // 创建从当前点回到起始点的路径

moveTo(x,y); //把路径移动到画布中的指定点,不创建线条

stroke(); // 绘制已定义的路径

fillStyle="#fff"; //  属性设置或返回用于填充绘画的颜色、渐变或模式。

fill(); // 填充当前绘图(路径)

arc(x,y,r,sAngle,eAngle,false); // 创建弧/曲线(用于创建圆形或部分圆);x和y是圆的中心坐标,r为半径,sAngle,eAngle 分别为起始弧度和结束弧度,最后一个参数规定是顺时针还是逆时针绘图,False = 顺时针,true = 逆时针。

弧度计算公式:360度 = 2∏,1度 = ∏/180

以下是钟表源码:

html代码:

<canvas id="cavs" width="500" height="500"></canvas>

JavaScript代码:

 1 var ocavs = document.getElementById("cavs");
 2  var ctx = ocavs.getContext("2d");
 3
 4  function drawTime(){
 5      var x = 200;
 6      var y = 200;
 7      var r = 150;
 8      ctx.clearRect(0,0,ocavs.width,ocavs.height);
 9      var oDate = new Date();
10      var oH = oDate.getHours();
11      var oMin = oDate.getMinutes();
12      var osec = oDate.getSeconds();
13
14      var oHvalue = (-90+oH*30+oMin/2)*Math.PI/180;
15      var oMinvalue = (-90+oMin*6)*Math.PI/180;
16      var osecvalue = (-90+osec*6)*Math.PI/180;
17
18      ctx.beginPath();
19      for(var i=0; i<60; i++){
20          ctx.moveTo(x,y);
21          ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
22      }
23      ctx.closePath();
24      ctx.stroke();
25
26      ctx.fillStyle = "white";
27      ctx.beginPath();
28      ctx.moveTo(x,y);
29      ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);
30      ctx.closePath();
31      ctx.fill();
32
33      ctx.lineWidth = 3;
34      ctx.beginPath();
35      for(var i=0; i<12; i++){
36          ctx.moveTo(x,y);
37          ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
38      }
39      ctx.closePath();
40      ctx.stroke();
41
42      ctx.fillStyle = "white";
43      ctx.beginPath();
44      ctx.moveTo(x,y);
45      ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);
46      ctx.closePath();
47      ctx.fill();
48
49      ctx.lineWidth = 5;
50      ctx.beginPath();
51      ctx.moveTo(x,y);
52      ctx.arc(x,y,r*10/20,oHvalue,oHvalue,false);
53      ctx.closePath();
54      ctx.stroke();
55
56      ctx.lineWidth = 3;
57      ctx.beginPath();
58      ctx.moveTo(x,y);
59      ctx.arc(x,y,r*14/20,oMinvalue,oMinvalue,false);
60      ctx.closePath();
61      ctx.stroke();
62
63      ctx.lineWidth = 1;
64      ctx.beginPath();
65      ctx.moveTo(x,y);
66      ctx.arc(x,y,r*19/20,osecvalue,osecvalue,false);
67      ctx.closePath();
68      ctx.stroke();
69  }
70  setInterval(drawTime,1000);
71  drawTime();
时间: 2024-10-07 05:38:35

canvas钟表的相关文章

Html5 canvas 钟表

原文:Html5 canvas 钟表 看到有不少人用canvas写钟表,今天也来加入他们,自己实现个. 效果图: 实现代码如下: <html> <head> <title>Html5 canvas 钟表</title> <style type="text/css"> canvas{ border:2px solid Gray; background-color:Gray;} </style> </head&g

canvas 钟表

<canvas id="can" height="300px" style="border: 1px solid black"></canvas> var can = document.getElementById("can") if(can.getContext){ var ctx = can.getContext("2d"); function draw(){ var date

用canvas模拟钟表

很久没有更新博客了,最近忙实习准备面试,快要心力交瘁-_-.空闲下来后,用HTML5的canvas模拟的简易钟表,贴上代码. 效果如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas模拟钟表</title> <style> bod

HTML5 Canvas 画钟表

画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>钟表</title> </head> <body onloa

canvas 画一个钟表

只是作为练习,没怎么抽象,都放在函数里面,只是简单的实现. 首先说下思路,将一个圆分成12份做表盘,然后用lineTo等方法话指针,最后用一个setInterval刷新画布,让指针每隔一秒动一下. js代码如下: window.onload = function () { var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'), centerX = canvas.height / 2,

使用 canvas+JS绘制钟表

效果如下: 附上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用Canvas绘制钟表</title> 6 <style> 7 body { 8 background-color: pink; 9 } 10 #clock { 11 display: block;

canvas制作简单钟表

之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用canvas同样会有一些浏览器不支持... 这里只讨论canvas的实现方式.^_^ html部分 html部分很简单,写入canvas标签,其id设置为“canvas”,用css设置成居中显示,代码如下: 1 <!doctype html> 2 <html> 3 <head>

HTML5 Canvas 绘制二十四字真言钟表

代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>钟表</title> </head> <body > <canvas id="myCanvu

canvas 之 - 精灵 钟表动画

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #canvas { border:solid 1px #ccc;} </style> </head> <script src="sprite.js"></script> &l