canvas - 基础知识 - 绘制时钟程序

最新推荐文章于 2020-12-15 22:24:19 发布
最新推荐文章于 2020-12-15 22:24:19 发布
阅读量240 收藏
点赞数
分类专栏： canvas集选 文章标签： canvas 时钟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014085502/article/details/89958382
版权

在时钟的绘制中，主要用到canvas绘图API：

arc()

beginPath()

clearRect()

fill()

fillText()

lineTo()

moveTo()

stroke()

效果图如下：

页面代码如下：

<!DOCTYPE html>

<html>

<head>

<title>A Simple Canvas Example</title>

<style>

body {

background: #ddd;

}

#canvas {

margin: 10px;

padding: 10px;

background: #fff;

border: thin inset #aaa;

/* width: 600px;

height: 300px; */

}

</style>

</head>

<body>

<!-- <canvas id="canvas">

canvas not supported

</canvas> -->

<canvas id="canvas" width="600" height="600">

canvas not supported

</canvas>

<script src="clock.js"></script>

</body>

</html>

 

逻辑代码：

var canvas = document.getElementById('canvas'),

context = canvas.getContext('2d'),

FONT_HEIGHT = 15,

MARGIN = 35,

HAND_TRUNCTION = canvas.width/25,

HOUR_HAND_TRUNCTION = canvas.width/10,

NUMERAL_SPACING = 20,

RADIUS = canvas.width/2 - MARGIN,

HAND_RADIUS = RADIUS + NUMERAL_SPACING;

 

// functions....

 

function drawCircle() {

context.beginPath();

// var width = canvas.width >= canvas.height ? canvas.height : canvas.width

// context.arc(width/2, width/2, RADIUS, 0 , Math.PI*2, true);

context.arc(canvas.width/2, canvas.height/2, RADIUS, 0 , Math.PI*2, true);

context.stroke();

}

 

function drawNumerals() {

var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

angle = 0,

numeralWidth = 0;

numerals.forEach(function(numeral){

angle = Math.PI/6 * (numeral - 3);

numeralWidth = context.measureText(numeral).width;

context.fillText(numeral, canvas.width/2 + Math.cos(angle)*(HAND_RADIUS) -

numeralWidth/2, canvas.height/2 + Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);

});

}

function drawCenter() {

context.beginPath();

context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);

context.fill();

}

 

function drawHand(loc, isHour) {

var angle = (Math.PI*2) * (loc/60) - Math.PI/2,

handRadius = isHour ? RADIUS - HAND_TRUNCTION - HOUR_HAND_TRUNCTION : RADIUS - HAND_TRUNCTION;

context.moveTo(canvas.width/2, canvas.height/2);

context.lineTo(canvas.width/2 + Math.cos(angle)*handRadius,canvas.height/2+Math.sin(angle)*handRadius);

context.stroke();

}

 

function drawHands() {

var date = new Date,

hour = date.getHours();

 

hour = hour > 12 ? hour - 12 : hour ;

drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);

drawHand(date.getMinutes(), false, 0.5);

drawHand(date.getSeconds(), false, 0.2);

}

 

function drawClock() {

context.clearRect(0, 0, canvas.width, canvas.height);

drawCircle();

drawCenter();

drawHands();

drawNumerals();

}

 

// Initialization。。。

 

context.font = FONT_HEIGHT + 'px Arial';

loop = setInterval(drawClock, 1000)

如风似我
关注
专栏目录
使用canvas画一个时钟
kaelyn_X的博客
10-17 1256
介绍一下如何使用 HTML5 的 canvas 标签和 JavaScript 画一个时钟。
canvas基本时针程序
qq_20725287的专栏
04-25 504
canvas时钟程序终于写完了，在计算那些角度换算时，说明学好数学真的很重要，没有良好的逻辑思路理解的有点蛋疼！想当年我数学是那么溜，现在却，咳咳好汉不提当年勇。 花了半天吧canvas基本时钟程序都理解了，并且自己加了一个小美观的分钟点函数。js代码如下： /** * Created by Administrator on 2015/4/22. */ var canvas = d
HTML5之Canvas时钟小程序
吴林
12-16 729
这一段时间有空在看Canvas，由于以前开发过ActionScript版本的时钟，想着Canvas也一定能够实现，所以花了几个小时来调了一下，最终出来了，很是开心，所以在这里记录一下： 首先奉上效果图，虽然比较丑，没有用CSS过多的去渲染，这里完成了基本功能 ： 下面是我的目录结构： 目录结构很简单，下面看看代码是怎么实现的： myClock.html:<!DOCTYPE html>
Canvas 实现一个时钟
小鹏要逆袭的博客
08-02 1183
使用canvas实现另一个小时钟，效果图如下： 前端html代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt
canvas时钟
喜欢文学的程序员
06-02 936
canvas是HTML5新增的组件，提供了新的javascript API。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。canvas就像是页面上的一块画布，而jav...
Canvas-时钟
10-25
4. **绘制时钟** - 对于数字时钟，可以使用`fillText()`方法在画布上写入时间，需要注意时间格式化，例如`hours:` + hours + `:` + minutes + `:` + seconds。 - 指针式时钟则需要计算每个指针（时针、分针和秒针...
HTML5 Canvas绘制时钟
06-01
我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二维绘图板，通过JavaScript进行操作。它由`<canvas>`标签定义，并通过JavaScript的Canvas API进行绘图...
使用canvas绘制超炫时钟
09-28
接下来，我们开始绘制时钟。时钟分为以下几个部分： 1. **表盘**：使用径向渐变填充，创建12个扇形段，模拟钟面的刻度。首先保存当前的绘图状态，然后进行坐标转换，将原点移动到画布中心。计算每个刻度的角度（deg...
微信小程序开发-工具类-画布：时钟案例源码.zip
08-15
4. **定时器更新**：为了实现时钟的动态效果，通常会设置一个定时器（`setInterval`），每隔一定时间（如1秒）更新时间并重新绘制时钟。 5. **响应式布局**：由于画布尺寸可能随屏幕大小变化，需要处理好画布的宽高...
071-微信小程序-画布：时钟.zip
最新发布
06-11
下面将详细解释微信小程序中画布组件的基础知识以及如何实现一个时钟功能。 1. 微信小程序画布组件介绍： 微信小程序中的 `<canvas>` 组件提供了一个可绘制2D图形的区域，可以用来创建丰富的视觉效果，如图表、...
【Canvas时钟】使用canvas制作简易时钟
qq_44871797的博客
12-15 403
使用canvas制作简易时钟 准备工作 创建一个画布 <style> * { padding: 0; margin: 0; } </style> <canvas id="clock" width="400" height="400"></canvas> <!-- 创建一个400*400大小的画布 --> 获取到画布及画布绘图环境 var clock = document.getElementById("clock");//获取到画布 v
用canvas绘制一个简易时钟
weixin_34248258的博客
09-23 153
　　在见识了html5中canvas的强大，笔者准备制作一个简易时钟。 　　下面就是成果啦，制作之前我们先分析一下，绘制一个时钟需要做哪些准备。 一 、 1.首先这个时钟分为表盘，指针（时针，分针，秒针）和数字三部分。 2.表盘是个圆，这个简单。 3.绘制指针时，需要先获取到系统时间，然后找到时间和角度的关系。 4.然后利用画圆函数，把起始和终点设为同一角度，即可画出以圆心为...
canvas绘制简易时钟
angzhen7910的博客
05-18 130
时钟绘制的非常简易，但该有的都有了。 效果图如下， 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>clock</title> 6 &lt...
用canvas绘制时钟
Honey_tianming的博客
09-24 421
canvas是h5新增的元素，下面我们开学习一下怎样用canvas绘制一个时钟 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; canvas{ border
canvas 简易时钟
wupiaopiao_123的专栏
06-17 439
学习《HTML5 Canvas核心技术 图形、动画与游戏开发》笔记一 1. 完成一个如下图所示的时钟绘制，要用到的canvas 绘图 API 方法有： arc() , moveTo() , lineTo(), stroke(), fill(), beginPath(), clearRect().<!doctype html> <html> <head> <meta content="t
用canvas绘制一个时钟--学习canvas第二天
RisaSama的博客
05-09 204
先来看效果图，新手学的比较慢，做的粗糙一点。 首先获取到canvas。获取2d属性，修改他的值。 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), FONT_HEIGHT = 15, MARGIN = 35, HAND_TRUNCATION = canvas.width/25...
canvas实例—时钟效果
a595786041的博客
03-17 146
在本篇文章中，我们将利用canvas的知识来绘制一个时钟动画。 1、布局篇 1.1基础布局 首先我们在页面中放置一个canvas画布，将画布的颜色设置成#eee,宽高为400px。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
利用canvas绘制一个简单时钟
奋斗在路上
11-18 3824
首先在主页面中构建基本框架，其实只有一个时钟也没有什么框架啦 canvas clock div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid #ccc; } ---------------------------------------
微信小程序实战：canvas绘制动态时钟
"微信小程序入门案例——使用canvas元素绘制动态时钟，包括初始化页面、设置定时器每秒更新、绘制时钟刻度和指针等步骤。" 在微信小程序中，我们可以利用其提供的API来创建交互式的用户界面。本案例是一个基础的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值