HTML5 canvas 时钟

最新推荐文章于 2021-06-21 01:03:20 发布
最新推荐文章于 2021-06-21 01:03:20 发布
阅读量290 收藏
点赞数
文章标签： canvas 


HTML代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.colock_div{
				margin-top: 10%;
				margin-left: 40%;
				/*border: 1px solid red;*/
			}
			.colock{
				/*background-color: blue;*/
				/*border: 1px solid red;*/
				
				}
		</style>
	</head>
	
	<body>
		<div class="colock_div">
			<canvas width="400" height="400"   id="clock" class="colock">
		</div>
	</body>
	<script type="text/javascript" src="js/colock.js"></script>
</html>



js 代码：


var dom = document.getElementById('clock');
var ctx = dom.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width /200;

function drawBackground() {
	ctx.save();
	ctx.translate(r,r);
	ctx.beginPath();
	ctx.lineWidth = 10*rem;
	ctx.arc(0,0,r-ctx.lineWidth/2,2*Math.PI,false);
	ctx.stroke();
	
	var hourNumbers= [3,4,5,6,7,8,9,10,11,12,1,2];
	ctx.font =18*rem+"px Arial";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	hourNumbers.forEach(function(number,i){
		var rad = 2 * Math.PI/12 * i;
		var x = Math.cos(rad)*(r-40*rem);
		var y = Math.sin(rad)*(r-40*rem);
		ctx.fillText(number,x,y);
	});
	
	for (var i = 0 ; i<60;i++) {
		var rad = 2 * Math.PI/60 * i;
		var x = Math.cos(rad)*(r-18*rem);
		var y = Math.sin(rad)*(r-18*rem);
		ctx.beginPath();
		if(i % 5 === 0){
			ctx.fillStyle = "#000";
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}else{
			ctx.fillStyle = "#ccc";
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}
		
		
		ctx.fill();
		
	}
	
}

function darwHour(hour,minute){
	ctx.save();
	ctx.beginPath();
	var rad = 2* Math.PI / 12 *hour;
	var mrad= 2* Math.PI / 12/60 *minute;
	ctx.rotate(rad+mrad);
	ctx.lineWidth = 6*rem;
	ctx.lineCap = "round";
	ctx.moveTo(0,10*rem);
	ctx.lineTo(0,-r/2);
	ctx.stroke();
	ctx.restore();
}

function drawMinute(minute){
	ctx.save();
	ctx.beginPath();
	var rad = 2* Math.PI /60 * minute;
	ctx.rotate(rad);
	ctx.lineWidth = 3*rem;
	ctx.lineCap = "round";
	ctx.moveTo(0,10*rem);
	ctx.lineTo(0,-r+30*rem);
	ctx.stroke();
	ctx.restore();
}

function drawSecond(second){
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = "#FF0000";
	var rad = 2* Math.PI /60 * second;
	ctx.rotate(rad);
	ctx.moveTo(-2,20*rem);
	ctx.lineTo(2,20*rem);
	ctx.lineTo(1,-r+18*rem);
	ctx.lineTo(-1,-r+18*rem);
	ctx.fill();
	ctx.restore();
}

function drawDot(){
	ctx.beginPath();
	ctx.fillStyle = "#fff";
	ctx.arc(0,0,3,0,2*Math.PI,false);
	ctx.fill();
}





function draw(){
	ctx.clearRect(0,0,width,height);
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	drawBackground();
	darwHour(hour,minute);
	drawMinute(minute);
	drawSecond(second);
	drawDot();
	ctx.restore();
}
draw()
setInterval(draw,1000);













                

        

        

    




    

      

        

            

              
                
                  小小的木头人
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
使用canvas 做动态时钟特效

				
			

			

				

					zyljjf的博客
				

				

					12-15
					
					516
					
				

			

		

		

			
				
使用canvas 做动态时钟特效1) shizhong.html 
 
     
         
            <style type="text/css">
        div{            text-align: center;
            margin: 250px;
        }
        #clock{
            bord

			
		

	



                

              
                



	

		

			

				
					
HTML5 canvas时钟效果.zip

				
			

			

				

					05-23
				

			

		

		

			
				
在这个“HTML5 canvas时钟效果.zip”压缩包中，包含了一个使用Canvas API实现的时钟显示功能。这个时钟不仅绘制了表盘、时针、分针和秒针，还展示了数字时间，为网页增添了一种实用且动态的元素。  1. **Canvas基本...

			
		

	



                


  
              

                


	

		

			

				
					
HTML5 木头人走路动画.rar

				
			

			

				

					07-10
				

			

		

		

			
				
HTML5 CSS3技术制作的木头人走路动画，除了应用HTML5技术外，还使用了jquery，以及调用了几个JS封装库，不但实现了走路动画，而且还可用鼠标拖动木头人改变人物角度，呈现三维的木头人效果，视觉效果还是挺酷的。

			
		

	





	

		

			

				
					
HTML5 Canvas 画钟表

				
			

			

				

					weixin_33831673的博客
				

				

					09-09
					
					113
					
				

			

		

		

			
				

画钟表是2D画图的老生常谈，我也不能免俗弄了一个。代码如下：

&lt;!DOCTYPE html&gt;
&lt;html lang="utf-8"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
&lt;head&gt;
     &lt;title

			
		

	



		

			
		



	

		

			

				
					
html5canvas绘制时钟

				
			

			

				

					云卷云舒i的博客
				

				

					03-31
					
					1234
					
				

			

		

		

			
				
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="gb2312"&gt;
&lt;script type="text/jscript"&gt;
var slen=70;
var mlen=65;
var hlen=45;
var ls=0;
var lm=0;
var lh=0;
function draw(

			
		

	





	

		

			

				
					
html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果

				
			

			

				

					weixin_35693055的博客
				

				

					06-20
					
					125
					
				

			

		

		

			
				
本文实例讲述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考，具体如下：HTML部分：canvas绘图JavaScript部分：function init(){var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");setInterval(function()...

			
		

	





	

		

			

				
					
html5canvas绘制时钟,HTML5 Canvas 时钟

				
			

			

				

					weixin_42485489的博客
				

				

					06-20
					
					87
					
				

			

		

		

			
				
1.[图片]QQ截图20120712130049.png​2. [代码][HTML]代码HTML5 时钟.clocks {height: 500px;margin: 25px auto;position: relative;500px;}HTML5 时钟3. [代码][JavaScript]代码// inner variablesvar canvas, ctx;var clockRadius =...

			
		

	





	

		

			

				
					
HTML5canvas时钟实例

				
			

			

				

					长空一笑的博客
				

				

					03-19
					
					914
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{background: #000;}
        #c1{background: #fff;}
    </style>
    <script>

			
		

	





	

		

			

				
					
html5画布手绘时钟,HTML5 Canvas 时钟

				
			

			

				

					weixin_39939601的博客
				

				

					06-21
					
					245
					
				

			

		

		

			
				
​2. [代码][HTML]代码HTML5 时钟.clocks {height: 500px;margin: 25px auto;position: relative;width: 500px;}HTML5 时钟3. [代码][JavaScript]代码// inner variablesvar canvas, ctx;var clockRadius = 250;var clockImage;//...

			
		

	





	

		

			

				
					
html5 canvas时钟

				
			

			

				

					andywang821017的博客
				

				

					09-19
					
					111
					
				

			

		

		

			
				
基础知识点：       canvas标签只是图形容器，您必须使用脚本来绘制图形。    getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。    getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。    fillRect(l,t...

			
		

	





	

		

			

				
					
HTML5 canvas 时钟

				
			

			

				

					03-31
				

			

		

		

			
				
javascript HTML5 canvas 时钟

			
		

	





	

		

			

				
					
15个超绚丽的HTML5 Canvas时钟动画特效

				
			

			

				

					08-23
				

			

		

		

			
				
之前我们有给大家介绍过很多基于...这次要分享的是15个超绚丽的HTML5 Canvas时钟动画特效，它们很多都有各自不同的外观，有几个时钟的造型还非常新颖奇特，因为是基于HTML5 Canvas的，所以你的浏览器需要支持HTML5。

			
		

	





	

		

			

				
					
HTML5 Canvas爱心时钟特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
在这个“HTML5 Canvas爱心时钟特效代码”中，开发者利用Canvas API构建了一个独特且富有创意的时钟，时钟的指针和背景由爱心形状构成，为网页增添了浪漫和趣味性。  首先，我们需要理解HTML5 Canvas的基本概念。...

			
		

	





	

		

			

				
					
HTML5 Canvas爱心时钟代码

				
			

			

				

					06-24
				

			

		

		

			
				
这个"HTML5 Canvas爱心时钟代码"是一个利用Canvas元素制作的创意时钟效果，将时间以爱心的形式展现出来，增加了网页的互动性和趣味性。  首先，我们要了解Canvas的基本用法。HTML5中的`<canvas>`标签是一个可嵌入的...

			
		

	





	

		

			

				
					
初识HTML5 canvas时钟绘制

				
			

			

				

					qq_49721447的博客
				

				

					01-08
					
					365
					
				

			

		

		

			
				
HTML5 canvas 时钟绘制
canvas时钟绘制


效果展示
因为不会制作动态gif图，只能上传一张静态图了，此时钟会随时间变化


原理说明


代码展示


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘制时钟</title>
		<style type="text/css">
			#hour,#min,#sec{
				

			
		

	





	

		

			

				
					
深度学习算法hinton的自动编码器matlab代码.rar

				
			

			

				

					08-09
				

			

		

		

			
				
1.版本：matlab2014/2019a/2024a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 

5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 

替换数据可以直接使用，注释清楚，适合新手

			
		

	





	

		

			

				
					
Windows快捷键大全

				
			

			

				

					08-09
				

			

		

		

			
				
Windows系统，Windows快捷键大全，常用快捷键，Windows热键，热键大全，操作系统，IT，电脑，计算机，计算机操作，电脑热键

			
		

	





	

		

			

				
					
基于MATLAB的细胞计数MATLAB.7z

					
最新发布

				
			

			

				

					08-09
				

			

		

		

			
				
在MATLAB中进行细胞计数可以使用以下步骤：

1. 预处理图像：导入图像并进行预处理，例如调整图像大小、转换为灰度图像等。

2. 图像分割：使用合适的图像分割方法将细胞从背景分离出来。常用的图像分割方法包括阈值分割、边缘检测等。

3. 细胞计数：对分割后的图像进行细胞计数。可以使用MATLAB中的函数或自定义算法进行计数。例如，可以使用regionprops函数获取每个连通分量的属性，然后根据一些条件（如面积、圆度等）筛选出细胞，并统计细胞数量。

下面是一个示例代码，演示了如何使用MATLAB进行细胞计数：

```matlab
% 1. 导入图像并进行预处理
image = imread('cells.jpg');
grayImage = rgb2gray(image);

% 2. 图像分割
threshold = graythresh(grayImage);
binaryImage = imbinarize(grayImage, threshold);

% 3. 细胞计数
labeledImage = bwlabel(binaryImage);

			
		

	





	

		

			

				
					
html5css3  canvas时钟

				
			

			

				

					05-25
				

			

		

		

			
				
持续集成（CI）和持续部署（CD）是软件开发过程中非常重要的环节，其目的是为了尽可能快地将代码从开发环境交付到生产环境，并保证其质量和稳定性。  持续集成（CI）是指开发人员将代码频繁地提交到版本控制系统，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值