canvas钟表代码， 欢迎大家有好点建议可以提。js高级扣扣群：170798851 欢迎来交流学习
git项目地址：https://github.com/Jonavin/HTML5_Study
/**
* Created by Administrator on 2014-11-22.
*/
(function(win){
var doc = win.document,cvs = doc.getElementById("canvas"),ctx = cvs.getContext("2d"),
WIDTH = cvs.width,HEIGHT = cvs.height,
FONT_HEIGHT=3,MARGIN=160,HAND_TRUNCATION = WIDTH/10,
HOUR_HAND_TRUNCTION = WIDTH/10,NUMERAL_SPACING = 20,
RADIUS = WIDTH/2-MARGIN,HAND_RADIUS=RADIUS+NUMERAL_SPACING,
numerals = [1,2,3,4,5,6,7,8,9,10,11,12];
/**
* 画图函数
* @type {{}}
*/
var _functions = {
//画外层圆形
drawCircle:function(){
ctx.beginPath();//开始路径
ctx.arc(WIDTH/2,HEIGHT/2,RADIUS,0,Math.PI*2,true);
ctx.stroke();
},
//画钟表刻度
drawNumerals:function(){
var angle = 0,numeralWidth = 0;
numerals.forEach(function(numeral){
angle = Math.PI/6*(numeral-3);
numeralWidth = ctx.measureText(numeral).width;
ctx.fillText(numeral,WIDTH/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,HEIGHT/2+Math.sin(angle)+(HAND_RADIUS)+FONT_HEIGHT/3);
});
},
//画中间圆心
drawCenter:function(){
ctx.beginPath();
ctx.arc(WIDTH/2,HEIGHT/2,5,0,Math.PI*2,true);
ctx.fill();//实心
},
//画钟表指针
drawHand:function(loc,isHour){
var angle = (Math.PI*2)*(loc/60)-Math.PI/ 2,
handRadius = isHour?RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCTION:RADIUS-HAND_RADIUS;
ctx.moveTo(WIDTH/2,HEIGHT/2);//改变圆点坐标
ctx.lineTo(WIDTH/2+Math.cos(angle)*handRadius,HEIGHT/2+Math.sin(angle)*handRadius);
ctx.stroke();
},
//画所有的钟表指针
drawHands:function(){
var _d = new Date,_h = _d.getHours(),
_h = _h>12?_h-12:_h;
this.drawHand(_h*5+(_d.getMinutes()/60)*5,true);
this.drawHand(_d.getMinutes(),false);
this.drawHand(_d.getSeconds(),false);
},
//画钟表主函数
drawClock: function () {
ctx.clearRect(0,0,WIDTH,HEIGHT);//清空画布
this.drawCircle();
this.drawCenter();
this.drawHands();
//this.drawNumerals();
}
}
ctx.font = FONT_HEIGHT+"px";
loop = setInterval(function(){
_functions.drawClock.call(_functions);
},1000);
})(window);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas钟表</title>
<style>
*,html,body{
padding:0;
margin: 0;;
}
body{
background: #aaaaaa;
text-align: center;
}
#canvas{
margin: 0 auto;
border: thin solid dodgerblue;
background: #ffffff;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
<script src="clock.js"></script>
</html>
相关推荐
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
Leaflet.Canvas-Markers是Leaflet的一个扩展，它引入了一种新的标记类型，即使用HTML5 Canvas元素来创建地图标记。与传统的SVG或图像标记相比，Canvas标记的优势在于其渲染性能。由于Canvas是在内存中绘制图形，因此...
Canvas是HTML5的一个重要特性，允许在网页上进行动态图形绘制。在这个“vue-canvas-poster”项目中，我们将探讨如何结合Vue和Canvas来实现一个海报合成的功能。 首先，Vue组件是Vue.js的核心概念，它允许开发者将UI...
HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar ...
HTML5的Canvas元素是网页开发中的一个重要组成部分，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图功能。在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中，包含的项目是一个利用Canvas API...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。"html5-canvas-mouse-ink"这个项目显然与Canvas有关，特别是涉及到了鼠标交互和动画效果，这通常是...
html2canvas-1.0.0-rc.4版本
HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas五彩纸屑飘落动画特效.rar HTML5-Canvas...
在微信小程序中，`canvas`同样被用来进行图形绘制和交互，但是其API和HTML5中的canvas有所不同，主要是为了适应小程序的特性和性能优化。 该组件的核心在于拖动和缩放机制的实现。微信小程序提供了`wx....
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在...解压并查看源代码，你将能够学习到如何在实际项目中应用HTML5 Canvas。通过学习和实践，你可以创建出各种富有创意和交互性的加载效果，提升网页的用户体验。
EC-Canvas是阿里云ECharts团队推出的一种专为移动端设计的绘图库，它基于HTML5的Canvas元素，用于在移动设备上展示丰富的数据可视化效果。EC-Canvas动态加载是其核心特性之一，允许开发者在运行时根据需要加载图表，...
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
在小程序的开发过程中，`ec-canvas` 是一个重要的组件，主要用于实现与HTML5 canvas类似的图形绘制功能。 在微信小程序中，`ec-canvas` 是一个特殊的画布组件，它能够提供丰富的图形绘制能力，如线条、形状、图像...
这个组件基于HTML5的canvas元素，使得用户能够在PC和移动设备上进行手写签名，适用于各种需要签名确认的场景，如电子商务、文档签署等。 在深入探讨Vue-sign-canvas组件之前，我们先了解一下关键组成部分： 1. **...
基于HTML5 Canvas烟花绽放效果，支持自定义 基于HTML5 Canvas烟花绽放效果，支持自定义 基于HTML5 Canvas烟花绽放效果，支持自定义 基于HTML5 Canvas烟花绽放效果，支持自定义 基于HTML5 Canvas烟花绽放效果，...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。"html5-canvas-web-图片涂鸦"这个主题涉及到的知识点主要集中在如何利用HTML5的Canvas API来实现图片...
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接绘制2D和3D图形。这个"html5-canvas-3d-line-avatar.zip"压缩包显然包含了一个使用HTML5 Canvas实现3D线框头像的示例项目。在这个项目中，我们将探讨...
HTML5 Canvas 是一种在网页上绘制图形的API，它是HTML5标准的一部分，允许开发者通过JavaScript进行动态、交互式的2D和3D图形渲染。在这个"html5-canvas-rabbit-run-games-code"项目中，我们关注的是一个基于Canvas...
HTML5 Canvas Border Pixel Progressbar是一种使用HTML5 Canvas API创建的进度条效果，它将边界像素化，以展示进度。在本文中，我们将深入探讨HTML5 Canvas API，了解如何利用其特性构建这种独特的进度条。 首先，...
【标题】"html5-canvas-3d-earth-rotate.zip" 涉及的主要知识点是HTML5中的Canvas API以及3D地球旋转效果的实现。HTML5 Canvas是一个强大的绘图工具，允许开发者在网页上进行动态图形绘制，为网页带来了丰富的交互性...