原生JS实现Canvas时钟

HTML中只有一个div包裹一个canvas元素，重点看JS部分。

重点：

beginPath() 方法在一个画布中开始子路径的一个新的集合。也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新的路径。
ctx.save()表示保存save函数之前的状态，ctx.restore()表示获取save保存的状态
其他方法参考API

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clock</title><style>div {text-align: center;margin-top: 100px;}#clock {border-radius: 50%;box-shadow: 2px 2px 20px #eee;}</style>
</head>
<body><div><canvas id="clock" height="600px" width="600px"></canvas>    </div>  <script>window.onload = function() {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 ratio = width / 200;dom.onmouseover = function () {dom.style.boxShadow = "2px 2px 20px #ddd";}dom.onmouseout = function () {dom.style.boxShadow = "2px 2px 20px #eee";}function drawBackground() {ctx.save()ctx.translate(r, r);ctx.lineWidth = 6 * ratio;ctx.beginPath();ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2 * Math.PI, false);ctx.fillStyle = '#fff'ctx.fill();var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];ctx.font = 18 * ratio + "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 - 30 * ratio);var y = Math.sin(rad) * (r - 30 * ratio);ctx.fillStyle = '#333'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 - 15 * ratio);var y = Math.sin(rad) * (r - 15 * ratio);ctx.beginPath();if (i % 5 === 0) {ctx.fillStyle = '#666';ctx.arc(x, y, 1.5 * ratio, 0, 2 * Math.PI, false);} else {ctx.fillStyle = '#666';ctx.arc(x, y, 1 * ratio, 0, 2 * Math.PI, false);}ctx.fill();}}function drawHour(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 * ratio;ctx.lineCap = 'round';ctx.moveTo(0, 10 * ratio);ctx.lineTo(0, -r / 2 + 4 * ratio);ctx.stroke();ctx.restore();}function drawMinute(minute) {ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 60 * minute;ctx.rotate(rad);ctx.lineWidth = 3 * ratio;ctx.lineCap = 'round';ctx.moveTo(0, 10 * ratio);ctx.lineTo(0, -r / 2 - 4 * ratio);ctx.stroke();ctx.restore();}function drawSecond(second) {ctx.save();ctx.beginPath();ctx.fillStyle = '#930'var rad = 2 * Math.PI / 60 * second;ctx.rotate(rad);    ctx.moveTo(-2 * ratio, 20 * ratio);ctx.lineTo(2 * ratio, 20 * ratio);ctx.lineTo(1, -r / 2 - 12 * ratio);ctx.lineTo(-1, -r / 2 - 12 * ratio);ctx.fill();ctx.restore();}function drawDot() {ctx.beginPath();ctx.fillStyle = '#EEE';ctx.arc(0, 0, 3 * ratio, 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();drawDot();drawHour(hour, minute);drawMinute(minute);drawSecond(second);ctx.restore();}draw();setInterval(draw, 1000);}</script>
</body>
</html>

转载于:https://www.cnblogs.com/garmin6/p/10613144.html

原生JS实现Canvas时钟相关推荐

java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能
1. 本片文章是使用的原生JS代码编写的画板,能实现画笔粗细的修改,以及画笔颜色的修改 2. 用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标 ...
原生JS的canvas标签画时钟
首先要申明本人对于美除了美女真没什么要求. 其次讲讲次学习碰到重要知识点: 1.画圆(弧): context.arc(x, y, radius, Math.PI / 180 * startAngle, ...
前端学习（2879）歌谣学习篇原生js和canvas实现弹幕功能
我是歌谣放弃很难坚持一定很酷 2021继续加油目录结构文件地址源码地址后面可见源码文件 index.css body { margin: 0; } .container { width: ...
原生js实现canvas粒子特效
要实现的效果当鼠标移入容器时,让鼠标作为中心点半径为80到圆内的粒子散开当粒子不在圆的范围后,粒子返回原来的位置主要代码创建初始位置 // NUM_PARTICLES是粒子总个数for ( i ...

原生JS实现Canvas时钟

原生JS实现Canvas时钟相关推荐

最新文章

热门文章