利用canvas制作时钟表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas画布绘制时钟</title><style>body{background: black}#c1{background: white}span{color:white;}</style>
</head>
<body>
<canvas id="c1" width="400" height="400"><span>不支持canvas浏览器</span>
</canvas>
<script>var oC= document.querySelector("canvas");var oGC=oC.getContext('2d');//浏览器打开时停滞一秒才会运行，解决办法是封装成一个函数，开始时进行调用，在开始计时器。//进行画布的反复绘制，从而达到时针变化的效果。setInterval(function(){oGC.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);//保存路径oGC.save();//大圆和小刻度for(var i=0;i<60;i++){oGC.beginPath();oGC.moveTo(200,200);oGC.arc(200,200,100,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);oGC.stroke();}oGC.beginPath();oGC.moveTo(200,200);oGC.arc(200,200,90,0,360*Math.PI/180,false);oGC.fillStyle="white";oGC.fill();//大刻度for(var i=0;i<12;i++) {oGC.beginPath();oGC.moveTo(200,200);oGC.arc(200,200,100,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);oGC.lineWidth='2';oGC.stroke();}oGC.beginPath();oGC.fillStyle="#fff";oGC.arc(200,200,80,0,360*Math.PI/180,false)oGC.fill();//时间的换算 var oD=new Date();//canvas起点是3点位置所以-90是12点的位置。小时的转化是由小时和分钟进行转化。1小时为30度，30度为60分钟，则1分钟为0.5度var oH=Math.floor(oD.getHours()*30-90+oD.getMinutes()/2)//同理var oM=Math.floor(oD.getMinutes()*6-90+oD.getSeconds()/10);var oS=oD.getSeconds()*6-90;//时针的绘制oGC.beginPath();oGC.moveTo(200,200);oGC.arc(200,200,40,oH*Math.PI/180,oH*Math.PI/180,false);oGC.lineWidth='4';oGC.strokeStyle="pink";oGC.stroke();//分针的绘制oGC.beginPath();oGC.moveTo(200,200);oGC.arc(200,200,60,oM*Math.PI/180,oM*Math.PI/180,false);oGC.lineWidth='3';oGC.strokeStyle="yellow";oGC.stroke();//秒针的绘制oGC.beginPath();oGC.moveTo(200,200);oGC.arc(200,200,80,oS*Math.PI/180,oS*Math.PI/180,false);oGC.lineWidth='2';oGC.strokeStyle="green";oGC.stroke();oGC.restore();},1000)</script>
</body>
</html>

注意：1.圆的绘制：arc(x,y,半径,起始弧度,结束弧度,旋转方向)

3.canvas的圆的起点在3点钟的位置。

2.旋转方向：顺时针（默认：false）、逆时针（true）。

4.时间转化。

利用canvas制作时钟表相关推荐

canvas制作简单钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
HTML画正方形钟表,html5 canvas绘制时钟表时间
特效描述:html5 canvas绘制时钟表时间.用canvas精灵绘制器绘制的时钟代码结构 1. 引入JS 2. HTML代码 var Sprite=function(name,painter, ...
利用Canvas制作旋转的矩形
利用Canvas制作旋转的矩形 HTML5 Canvas API提供了强大的图形绘制功能,包括形状.颜色.线条样式等.在本文中,我将展示如何使用Canvas API创建一个旋转的矩形. 一.HTML结 ...
利用canvas制作加速球波浪效果
我在第一篇博客中提到运用canvas制作加速球效果,现在把整个代码分享给大家,希望对大家有帮助.(转载请标明出处) 先上效果图: 还存在一些问题: 1.想法是鼠标触碰到滑块才执行画波浪的效果,结果是直 ...
利用canvas制作进度条实践
开门见字之前写过一篇H5新标签progress进度条的使用文章,当时觉得研究的还行,但是发现,这个标签在不同浏览器中样式表现是不一致的,如下: chrome中:,一抹蓝色划过天际: 火狐中:,一片绿 ...
python用七巧板图片画个图_canvas 入门－利用 canvas 制作一个七巧板
当前浏览器不支持cnavas var tangram = [ { f:[{x: 0,y: 0},{x: 800, y: 0},{x: 400, y: 400}], color: "#FEF7 ...
利用canvas制作背景动画（3）
一. 炫酷星空 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" c ...
canvas制作钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...

利用canvas制作时钟表

利用canvas制作时钟表相关推荐

最新文章

热门文章