首页 / CANVAS / canvas如何绘制时钟？canvas画环形时钟的实现过程

canvas如何绘制时钟？canvas画环形时钟的实现过程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了canvas如何绘制时钟？canvas画环形时钟的实现过程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4254字，纯文字阅读大概需要7分钟。

内容图文

canvas是html5中新增的元素，可用于在网页上来绘制图像，既然可以用于画图，那么自然可以来画一个环形的时钟，所以，接下来的这篇文章将给大家来分享关于如何利用canvas绘制环形时钟的方法。

首先我们要知道的是环形时钟的组成形状是画一个圆还有刻度，然后还有时针分针秒针，然后就是用定时器让针动起来。

然后我们就根据环形时钟的组成来利用canvas绘制出时钟。

我们先来看一看画环形时钟所需的函数。

1、圆形：canvas.arc(x,y,r,0,2*Math.PI);

2、圆角的线条：canvas.lineCap = "round";

3、文字：canvas.font、canvas.textBaseline、canvas.textAlign;/

4、擦除：canvas.clearRect(x,y,w,h)。

知道了绘制环形时钟所需要的基本函数与组成后，我们就继续来说关于canvas绘制环形时钟的步骤。

一、首先绘制需要在文档加载完成后开始，setInterval()实现帧动画，这里和写canvas小游戏的套路是一样的，以一定速度重复绘制-擦除。

代码如下：

<canvas id="canvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>

// 加载后开始
document.body.onload = start;
function start(){
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;
    var r = width/2; //半径
    function render(){
        /*
            画钟表静态的元件
         */
    }
    function drawGuid(){
        /*
            画钟表指针
         */
        var now = new Date();
        h = now.getHours();
        m =now.getMinutes();
        s = now.getSeconds();
        drawHour(h,m);
        drawMinute(m,s);
        drawSecond(s);
    }
    setInterval(function(){
        render();
        drawGuid();
    },30/1000)
}

说明：每一帧都先用canvas.clearRect(x,y,w,h)擦掉画布上的像素，否则会造成当前像素和之前的像素叠加的问题。将画布的原点移到画布的中心，有助于绘制刻度和以中心为基点旋转的指针，在之前得保存平移之前的环境状态。

二、每隔6度角画一个刻度，每隔30度画一个大刻度，因为原点被移到中心，利用JavaScript自带的函数（Math.sin(deg)、Math.cos(deg)）得出刻度的x、y坐标，注意将角度转化为弧度。

代码如下：

function render(){
    cxt.clearRect(0,0,width,height);
    cxt.save();
    cxt.translate(width/2,height/2);
    // 画轮廓
    cxt.beginPath();
    cxt.lineWidth = r*0.05;//轮廓圆宽度
    cxt.strokeStyle = "#333";//轮廓圆颜色
    cxt.arc(0,0,r-r*0.05,0,2*Math.PI); //圆
    cxt.stroke();
    cxt.closePath();
    // 画内圆
    cxt.beginPath();
    cxt.lineWidth = 1;
    var radi2 = r*0.85; //半径
    cxt.arc(0,0,radi2,0,2*Math.PI); //圆
    cxt.stroke();
    cxt.closePath();
    // 画刻度 使用Math.sin(deg)、Math.cos(deg)来计算圆上点的坐标
    // 每隔6度画一个点
    var hour = [6,5,4,3,2,1,12,11,10,9,8,7],i = 0;
    for(var deg = 0;deg<360;deg=deg+6){
        var spotX = radi2*Math.sin(deg*2*Math.PI/360);
        var spotY = radi2*Math.cos(deg*2*Math.PI/360);
        var spot = r*0.02; //刻度半径
        cxt.beginPath();
        cxt.fillStyle = "#ccc";
        if(deg%30==0){
            cxt.fillStyle = "#333";
            spot = r*0.025;
            var textX =(radi2*0.85)*Math.sin(deg*2*Math.PI/360); //文字x坐标
            var textY =(radi2*0.85)*Math.cos(deg*2*Math.PI/360); //文字y坐标
            cxt.font = r*0.1 + "px Arial"; 
            cxt.textBaseline = "middle";// 文字垂直对齐方式
            cxt.textAlign = "center";   // 文字水平对齐方式
            cxt.fillText(hour[i],textX,textY);
            i++;
        }
        cxt.arc(spotX,spotY,spot,0,2*Math.PI);
        cxt.fill();
        cxt.closePath();
    }
    // 画中心
    cxt.beginPath();
    cxt.arc(0,0,r*0.05,0,2*Math.PI);
    cxt.stroke();
    cxt.closePath();
}

三、时针、分针、秒针的做法是一致的，使用canvas.rotate()绕原点旋转，旋转之前都要canvas.save()保存当前状态（指针的每一帧动作都是让画布旋转特定的角度，所以画完一次要摆正一次画布，否则秒针旋转一次，分针会在此基础上旋转）。

代码如下：

function drawHour(h,m){
    // 时针
    h = h + m/60;
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/12*h);
    cxt.lineWidth = r*0.05;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.4*0.2);
    cxt.lineTo(0,-r*0.4*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
function drawMinute(m,s){
    // 分针
    m = m + s/60;
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/60*m);
    cxt.lineWidth = 3;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.6*0.2);
    cxt.lineTo(0,-r*0.6*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
function drawSecond(s){
    // 秒针
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/60*s);
    cxt.strokeStyle = "#ff004f";
    cxt.lineWidth = 1;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.8*0.2);
    cxt.lineTo(0,-r*0.8*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}

注意：canvas.save()保存当前的画布状态到栈里，canvas.restore()取出堆栈里保存的的状态，属于先进后出，所以canvas.restore()取的是最近的一次保存。

四、绘制一次要调用之前保存过的环境。

代码如下：

setInterval(function(){
    render();
    drawGuid();
    cxt.restore();
},30/1000)

最后关于canvas中更多的内容可以参考HTML5开发手册。

以上就是canvas如何绘制时钟？canvas画环形时钟的实现过程的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的canvas如何绘制时钟？canvas画环形时钟的实现过程全部内容，希望文章能够帮你解决canvas如何绘制时钟？canvas画环形时钟的实现过程所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/386869.html

来源：【匿名】

【上一篇】如何用canvas绘制矩形？canvas画矩形的两种方法介绍【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【canvas如何绘制时钟？canvas画环形时钟的实现过程】教程文章相关的互联网学习教程文章

用canvas 实现个图片三角化（LOW POLY）效果【代码】【图】

之前无意中看到Ovilia?用threejs做了个LOW POLY，也就是图片平面三角化的效果，觉得很惊艳，然后就自己花了点时间尝试了一下。　　我是没怎么用过threejs，所以就直接用canvas的2d绘图API来做，因为感觉似乎这效果也用不上threejs。　　直接上demo先：http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html? ?（也可以在移动端看，不过因为计算量比较大，移动设备计算起来会比PC要多花些时间。）　　做这种效果...

canvas实现简单的画图工具中画笔效果【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>canvas实现简单的画图工具中画笔效果</title> </head> <body><canvas width="500" height="500" style="background:#eee;"></canvas><script>var canvas = document.getElementsByTagName(‘canvas‘)[0];var con = canvas.getContext(‘2d‘);canvas.onmousedown = function(e){var mx = e.layerX,my = e.layerY;con.moveTo(mx,my);canvas.onmousemove = fu...

----uni-app之用canvas画二维码实现分享----【图】

原文：https://www.cnblogs.com/followme789/p/10881453.html

html5 canvas 实现倒计时功能【代码】【图】

function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //填充色day: 0,time: 0,minute: 0,seconds: 0}if (a) {b = $.extend(b, a);}this.total = 0;this.id = b.id;this.x = b.x;this.y = b.y;this.radius = b.radius;this.angle = b.angl...

基于HTML5的Canvas技术实现前端的图片压缩【代码】

Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。　　HTML代...

canvas离屏技术与放大镜实现【代码】

教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步> （原文）canvas 离屏技术与放大镜实现' ref='nofollow'>>>> （原文）canvas 离屏技术与放大镜实现。更多讨论或者错误提交，也请移步。利用canvas除了可以实现滤镜，还可以利用离屏技术放大镜功能。为了方便讲解，本文分为 2 个应用部分：实现水印和中心缩放实现放大镜1. 什么是离屏技术？canvas 学习和滤镜实现介绍过drawImage接口。除了绘制图像，这个接口还可以：将...

Canvas实现曲线运动【代码】【图】

前言 Html5添加的最受欢迎的功能就是<canvas>元素，它负责在页面中设定一个区域，然后在里面可以通过javascript动态地在其内绘制图形。主流浏览器，IE9+，手机端都是支持它的。创建Canvas 要使用Canvas元素就必须先设置其width和height，指定绘图区域的大小类似：<canvas id="canvas" width="800" height="800"/> 如果要在这块画布上绘图的话，首先要取得绘图上下文,需调用getContext（）方法 var canvas=...

HTML5 组件Canvas实现图像灰度化【代码】

1. 新建一个html页面，在body tag之间加入<canvas id="myCanvas">Gray Filter</canvas> 2. 添加一段最简单的JavaScript代码：window.onload = function() { var canvas = document.getElementById("myCanvas");// do something here!!} 从Canvas对象获取绘制对象上下文Context的代码如下：var context = canvas.getContext("2d"); 在html页面中加入一幅图像的html代码如下:<img id="imageSource" src="hanjiaren.jpg" alt="Canvas ...

canvas实现的红包照片自适应效果【图】

效果图650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108043642828.jpg" title="QQ截图20170123114655.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108043643284.jpg" title="QQ截图20170123114704.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108043644413.jpg" title="QQ截图20170123114719.png" />650) this.width=650;" src="/upl...

Canvas实现图片放大缩小移动操作【代码】【图】

对于HTML5相信大家都不陌生，很早就出来了，但是貌似都没有真正的使用过。最近做项目时要实现这样一个需求：一个图片，大小不固定，要求能实现类似地图一样放大、缩小、移动功能。这里就很合适使用html5的canvas画布。实现步骤如下：1. 定义一个canvas标签。<canvas id="bargraphCanvas" width="500" height="600"></canvas>这里有个很重要的地方，就是这个width和height一定要写，否则不能实现。同时，画布的宽高只能用这个方法写...

【效果】使用canvas rotate实现一个旋转的矩形【代码】

使用canvas rotate实现一个旋转的矩形，并且以矩形的中心为原点，围绕原点旋转：<canvas id="canvas" width="800" height="400"></canvas><script type="text/javascript">var canvas = document.getElementById(‘canvas‘);var ctx = canvas.getContext(‘2d‘);ctx.translate(400,200);setInterval(function(){ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果 ctx.b...

canvas实现刮图效果【代码】【图】

<canvas id="myCanvas" width=300 height=300></canvas>JavaScript代码:var canvas = document.getElementById(‘myCanvas‘),ctx = canvas.getContext(‘2d‘),w = canvas.width,h = canvas.height,area = w * h,flag=false,l = canvas.offsetLeft;t = canvas.offsetTop,ctx.fillStyle = "#ccc";//覆盖第一层(添加灰色涂层)ctx.fillRect(0, 0, w, h);//添加背景即为要刮开的图像canvas.style.backgroundImage = ‘url(banner.jpg...

HTML5 Canvas绘图系列之一：圆弧等基础图形的实现【代码】【图】

之前的一个微信项目已经要结项了，最近整理一下项目中使用较多的canvas画图方面的知识吧，打算写个3,4篇的样子。本篇主要介绍基础操作和弧线画法。之后再写一下趋势图，直方图，文本图像处理的。言归正传，canvas元素本身是一个容器元素，提供一块画布，用脚本来实现想要画什么。为了演示使用，我们新增一个空的aspx页。首先，我们新增一个canvas元素： <canvas id="myConvas" style="display:block; margin:...

PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下：一、问题：在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的...

CANVAS - 相关标签

canvas动画

CANVAS - 最热教程

javascript – 如何通过z-index对这些c...微信小程序利用Canvas绘制图片和竖排文...微信小程序使用CANVAS绘制图片及图片圆...Canvas跨域的解决方案介绍 HTML5 Canvas核心技术—图形、动画与游...Python3 tkinter基础 Canvas create_po...javascript – 使用图像创建Canvas元素...微信小程序简单的canvas裁剪图片功能详...Vue中使用canvas方法总结关于HTML5Canvas的事件处理

首页 / CANVAS / canvas如何绘制时钟？canvas画环形时钟的实现过程

canvas如何绘制时钟？canvas画环形时钟的实现过程

内容导读

内容图文

内容总结

内容备注

内容手机端

【canvas如何绘制时钟？canvas画环形时钟的实现过程】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程