Canvas之绘制时钟

使用canvas绘制时钟效果
创建一个canvas之后拥有三要素：

id——画布的唯一标识
width——画布的宽
height——画布的高

**强烈建议不要使用css修改画布的宽高，因为画布的宽高表示的是画布内元素的像素大小，而使用css修改的宽高则是画布的大小，修改不当会导致内容失真或者模糊或者不全

使用canvas绘制时，一般步骤：

获取HTML中的画布元素
获取对应画布的上下文（画笔），这里想象为画笔更好理解，比如我们在电脑或平板上画图是会选择线条的粗细，线条的颜色等等，这个画笔也可以这么干！
根据相应的api绘制需要的图像

以下为使用canvas绘制时钟的代码，注释很详细，相信大家一定可以看懂滴！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用canvas绘制时钟</title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>init(); // 创建function init() {var c = document.getElementById("canvas"); //获取画布var ctx = c.getContext("2d"); //拿到画笔draw(ctx);}// 开始绘制function draw(ctx) {setInterval(function() {drawDial(ctx); //绘制表盘drawHands(ctx); //绘制指针}, 1000);}// 绘制所有指针function drawHands(ctx) {let now = new Date(); //获取当前时间let second = now.getSeconds(),min = now.getMinutes(),hour = now.getHours();hour = hour >= 12 ? hour - 12 : hour; //将时间转换成12小时制let pi = Math.PI;let secondAngle = pi / 180 * 6 * second; //获取秒针当前转动的角度let minuteAngle = pi / 180 * 6 * min + secondAngle / 60; //获取分针当前转动的角度let hourAngle = pi / 180 * 30 * hour + minuteAngle / 12; //获取时针当前转动的角度drawHand(hourAngle, 160, 12, 'black', ctx);drawHand(minuteAngle, 190, 8, 'black', ctx);drawHand(secondAngle, 220, 5, 'red', ctx);}// 绘制特定指针function drawHand(angle, len, width, color, ctx) {ctx.save();ctx.translate(300, 300);ctx.rotate(-Math.PI / 2 + angle); //将x轴逆时针旋转90度，以与x轴正方向的夹角为正夹角旋转指针对应的角度ctx.beginPath();ctx.moveTo(-20, 0); //绘制指针ctx.lineTo(len, 0);ctx.lineWidth = width;ctx.strokeStyle = color;ctx.lineCap = "round";ctx.stroke();ctx.closePath();ctx.restore();}// 绘制表盘function drawDial(ctx) {let pi = Math.PI;ctx.clearRect(0, 0, 600, 600); //初始化表盘ctx.save();ctx.translate(300, 300);ctx.beginPath();ctx.strokeStyle = "blue";ctx.lineWidth = 4;ctx.arc(0, 0, 295, 0, Math.PI * 2, true); //绘制表盘外侧的框框ctx.stroke();ctx.closePath();// 绘制时针刻度ctx.save();ctx.beginPath();ctx.strokeStyle = 'red';for (var i = 0; i < 12; i++) {ctx.rotate(Math.PI / 6); //旋转30度ctx.moveTo(250, 0);ctx.lineTo(290, 0);}ctx.stroke();ctx.closePath();ctx.restore();ctx.save();// 绘制秒针刻度ctx.beginPath();ctx.lineWidth = 5;ctx.strokeStyle = 'black'for (var i = 0; i < 60; i++) {if (i % 5 != 0) { //每当转到 整数小时 时跳过，即控制整点时刻 刻度较长ctx.moveTo(270, 0);ctx.lineTo(290, 0);}ctx.rotate(pi / 30); // 转6度}ctx.stroke();ctx.closePath();ctx.restore();ctx.restore();}</script>
</body></html>

Canvas之绘制时钟相关推荐

canvas 画布绘制时钟
利用canvas绘制时钟的一个小demo <!--* @Author: 164591357@qq.com 164591357@qq.com* @Date: 2022-08-06 11:04:07 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
html：canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
canvas绘制时钟刻度表
canvas绘制时钟刻度表 1.首先看一下效果图 2.基本知识点 canvas.drawText:绘制文字,注意基线的位置为文字的左下角y轴所在的线 canvas.drawLine:绘制线段,指定起始 ...
html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
s时钟画布 android,Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...
Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...

Canvas之绘制时钟

Canvas之绘制时钟相关推荐

最新文章

热门文章