《 初学 》 html5 制作简单时钟
/*HTML代码*/
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="style/canvas.min.css" rel="stylesheet" />
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="javascript/canvas.min.js"></script>
</body>
</html>
/*JS代码*/
/*
示例一、
var canvas = document.getElementById("canvas1"),
context = canvas.getContext("2d"); //获取绘图环境变量
context.font = "38pt Arial";
context.fillStyel = "cornflowerblue"; //颜色
context.strokeStyle = "blue"; //字符的轮廓线(描边)
context.fillText("你好啊", canvas.width / 2 - 150, canvas.height / 2 + 15); // 参数1、要绘制的文本内容。 参数2、canvas中要显示文本的“横”坐标。 参数3、canvas 中要显示文本的“纵”坐标
context.fillStroke("你好啊", canvas.width / 2 - 150, canvas.height / 2 + 15);
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------备注:Math.sin() 与 Math.cos() 用法----------------------------------------
-------------------------------------------------------------------------------------------------------------------------------
Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间;
Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数;
这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2*PI/360*角度;
30° 角度 的弧度 = 2*PI/360*30
如何得到圆上每个点的坐标?
解决思路:根据三角形的正玄、余弦来得值;
假设一个圆的圆心坐标是(a,b),半径为r,
则圆上每个点的X坐标=a + Math.sin(2*Math.PI / 360) * r ;Y坐标=b + Math.cos(2*Math.PI / 360) * r ;
如何求时钟的秒针转动一圈的轨迹?
假设秒针的初始值(起点)为12点钟方向,圆心的坐标为(a,b)。
解决思路:一分钟为60秒,一个圆为360°,所以平均每秒的转动角度为 360°/60 = 6°;
for(var times=0; times<60; times++) {
var hudu = (2*Math.PI / 360) * 6 * times;
var X = a + Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r // 注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。
}
*/
/*时钟canvas开始*/
// var offscreen = document.createElement('canvas'); //创建canvas元素
var clockCanvas = document.getElementById("canvas"),
clockContext = clockCanvas.getContext("2d"),
font_height = 15,
margin = 35,
hand_truncation = clockCanvas.width / 2,
hour_hand_truncation = clockCanvas.width / 10,
numeral_spacing = 20,
radius = clockCanvas.width / 2 - margin,
hand_radius = radius + numeral_spacing;
//第一步、 drawCircle 绘制一个表示钟面的圆形
function drawCircle() {
clockContext.beginPath(); // 1、定义路径(不可见)
clockContext.arc(clockCanvas.width / 2, clockCanvas.heigth / 2, radius, 0, Math.PI * 2, true);// 2、arc() 创建一个圆形路径
clockContext.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 = clockContext.measureText(numeral).width;
clockContext.fillText(
numeral,
clockCanvas.width / 2 + Math.cos(angle) * (hand_radius) - numeralWidth / 2,
clockCanvas.height / 2 + Math.sin(angle) * (hand_radius) + font_height / 3
);// fillText 绘制数字并进行canvas文本填充
});
}
//第二步、 drawCenter 绘制时钟中心的 小实心圆
function drawCenter() {
//组合调用beginPath()、arc() 、 fill() 绘制圆心点
clockContext.beginPath();
clockContext.arc(
clockCanvas.width / 2,
clockCanvas.height / 2,
5,
0,
Math.PI * 2,
true
);
clockContext.fill();
}
//第四步、绘制指针
function drawHand(loc, isHour) {
var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
handadius = isHour ? radius - hand_truncation - hour_hand_truncation : radius - hand_truncation;
clockContext.moveTo(clockCanvas.width / 2, clockCanvas.height / 2);//1、调用 moveTo() 方法将画笔移动到canvas中的制定地点
clockContext.lineTo(
clockCanvas.width / 2 + Math.cos(angle) * handadius, //cos(angle) angle的余弦值。返回的是 -1.0 到 1.0 之间的数
clockCanvas.height / 2 + Math.sin(angle) * handadius //sin(angle) angle 的正玄值。返回值在 -1.0 到 1.0 之间
);//2、调用 lineTo() 在该点娱另一个指定的点之间绘制一条不可见的路径
clockContext.stroke();//3、调用 stroke() 方法将当前路径变为可见
}
function drawHands() {
var date = new Date,
hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour;
//函数调用
drawHand(hour * 5 + (date.getMilliseconds() / 60) * 5, true, 0.5);
drawHand(date.getMinutes(), false, 0.5);
drawHand(date.getSeconds(), false, 0.2);
}
function drawClock() {
// clearRect() 方法擦除canvas 从新绘制时钟
clockContext.clearRect(0, 0, clockCanvas.width, clockCanvas.height);
drawCircle(); //方法调用
drawCenter();
drawHands();
drawNumerals();
}
clockContext.font = font_height + "px Arial";
//初始化: setInterval() 方法制作时钟的动画效果,该方法每秒钟调用一次drawClock() 函数
loop = setInterval(drawClock, 1000);
《 初学 》 html5 制作简单时钟相关推荐
- 电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享,HTML5制作简单画板
复制代码代 - phpStudy...
html5教程制作简单画板代码分享 HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...
- 使用pyqt5制作简单时钟小工具
一.概述 本文我们将介绍如何使用python+pyqt5在制作桌面时钟小工具 二.引言 此篇文章是我在学习pyqt5中多线程相关的Qtimer时,随手制作的小工具,最终打包成exe可执行文件在桌面随时 ...
- html制作状态栏数字时钟,用HTML5制作数字时钟的教程_html5教程技巧
就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看到这个案例,他觉得很酷炫,就跑过来问我,这个是怎么实现的,然后我大概想了一下实现方法后也来了点兴趣,就花了一点时间模仿做出 ...
- HTML5实现一个时钟动画,利用html5制作一个时钟动画效果
我们先来看下效果图(不考虑颜色搭配): (学习视频分享:html5视频教程) 我们首先要理解如何去实现这个时钟,暂时不要考虑动画,学着将问题进行拆解,一步一步实现. 首先我们需要画个方形,有个边框,给 ...
- 大球吃小球html5,怎么用html5制作简单的大球吃小球的游戏
匿名用户 1级 2017-12-16 回答 <html> <head> <title> 大球吃小球by大奔 </title> <script ty ...
- 电脑PHP动画制作画板,html5教程制作简单画板代码分享
HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">> ...
- html中的 脚本制作教程,html5教程制作简单画板代码分享
HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">> ...
- 用html制作生动的画板,html5教程制作简单画板代码分享
html5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">> ...
- 使用html5的游戏,使用HTML5制作游戏
使用HTML5制作简单游戏 记录一下自己制作游戏的基本模式和思路. 游戏架构 我的游戏制作架构图: l 浏览器接入层: 提供浏览器检测能力(主要看是否支持HTML5),提供多种客户端接入的兼容处理. ...
最新文章
- 刚刚!2020“中国高被引学者” 榜单发布:清华、北大、浙大位居内地前三!...
- Java学习笔记22
- IIS 6.0的web园 最大工作进程数
- 记一次被DDoS敲诈的历程
- springboot 数据库链接池常用配置
- js实现下拉框多选_bootstrap基础快速入门-10 dropdown下拉框
- 如何用jsp连接mysql_如何用jsp连接mysql数据库
- [bzoj3625][Codeforces 250 E]The Child and Binary Tree(生成函数+多项式运算+FFT)
- jmx 替代_使用JMX作为Ganglia的现代替代品进行CLDB监视
- VS Code 报错Vetur can‘t find ‘tsconfig.json‘ or ‘jsconfig.json‘的解决方法
- 探索 OpenStack 之(15):oslo.messaging 和 Cinder 中 MessageQueue 消息的发送和接收
- 六款WEB上传组件性能测试与比较
- 必读的Python入门书籍,你都看
- log4j日志级别小结
- (六)DDR协议功能之ODT模式与ZQ校准
- 0行代码,实现植物大战僵尸脚本
- 简明扼要聊聊 Vue3.0 的 Composition API 是啥东东!
- 使用约会应用Tinder时没人关注你?花钱就能插队露脸半小时
- mysql ERROR 1265 (01000)故障解决一例
- 七夕情人节生日表白爱心