Three.JS学习 7：使用Canvas画一个时钟
2017-01-14 11:33
483 查看
本章节不是Three.JS内容，而是Canvas内容
本文学习资源来自：
http://www.dhtmlgoodies.com/tutorials/canvas-clock/
准备canvas
注意这里的canvas的宽、高定义没有使用css的内联属性定义，因为css属性工作不是太好，可能会导致变形。
一周是360度，所以秒针转到的角度值是seconds*6，修改drawSecondHand:
现在的代码如下：
可以看到秒针已经动起来了。
效果：
下面还有一些画品牌等代码暂略…
本文学习资源来自：
http://www.dhtmlgoodies.com/tutorials/canvas-clock/
在canvas上画时钟
准备工作
取一张钟表的背景图过来，放在images/ 文件夹下准备canvas
<html> <head> <title>Canvas Clock</title> </head> <body> <canvas id="myCanvas" width="400" height="400"> Your browser does not support canvas </canvas> <script> </script> </body> </html>
注意这里的canvas的宽、高定义没有使用css的内联属性定义，因为css属性工作不是太好，可能会导致变形。
画钟表面
<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Your browser does not support canvas
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var clockImage = new Image();
var clockImageLoaded = false;
clockImage.onload = function () {
clockImageLoaded = true;
}
clockImage.src = 'images/clock.jpg';
function addBackgroundImage() {
context.drawImage(clockImage, 0, 0, canvas.width, canvas.height);
}
function drawHourHand() {
}
function drawMinuteHand() {
}
function drawSecondHand() {
}
function writeBrandName() {
}
function createClock() {
addBackgroundImage();
}
function clockApp() {
if (!clockImageLoaded) {
setTimeout('clockApp()', 100);
return;
}
createClock();
}
clockApp();
</script>
</body>
</html>移动中心点
<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Your browser does not support canvas
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var clockImage = new Image();
var clockImageLoaded = false;
clockImage.onload = function () {
clockImageLoaded = true;
}
clockImage.src = 'images/clock.jpg';
function addBackgroundImage() {
//画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
}
function drawHourHand() {
}
function drawMinuteHand() {
}
function drawSecondHand() {
}
function writeBrandName() {
}
function createClock() {
addBackgroundImage();
}
function clockApp() {
if (!clockImageLoaded) {
setTimeout('clockApp()', 100);
return;
}
//把旋转中心放到canvas的当中
context.translate(canvas.width / 2, canvas.height / 2);
createClock();
}
clockApp();
</script>
</body>
</html>画表针
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var clockImage = new Image();
var clockImageLoaded = false;
clockImage.onload = function () {
clockImageLoaded = true;
}
clockImage.src = 'images/clock.jpg';
function addBackgroundImage() {
//画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
}
function drawHourHand(theDate) {
}
function drawMinuteHand(theDate) {
}
function drawSecondHand(theDate) {
var seconds = theDate.getSeconds();
context.fillStyle = 'red';
drawHand(150);
}
//size是表针的长度
function drawHand(size) {
context.beginPath();
context.moveTo(0, 0); // center
context.lineTo(-4, -10);
context.lineTo(0, size * -1);
context.lineTo(4, -10);
context.lineTo(0, 0);
context.fill();
}
function writeBrandName() {
}
function createClock() {
addBackgroundImage();
var theDate = new Date();
drawHourHand(theDate);
drawMinuteHand(theDate);
drawSecondHand(theDate);
}
function clockApp() {
if (!clockImageLoaded) {
setTimeout('clockApp()', 100);
return;
}
//把旋转中心放到canvas的当中
context.translate(canvas.width / 2, canvas.height / 2);
createClock();
}
clockApp();旋转
秒针目前是向上的。现在需要旋转canvas以和得到正确的角度。一会会使用context.rotate()函数，它的参数是弧度。公式是：function degreesToRadians(degrees){
return (Math.PI/180)*degrees;
}一周是360度，所以秒针转到的角度值是seconds*6，修改drawSecondHand:
function drawSecondHand(theDate){
context.save();
context.fillStyle = 'red';
var seconds = theDate.getSeconds();
context.rotate( degreesToRadians(seconds * 6));
drawHand(150);
context.restore(); //旋转后再恢复context状态
}现在的代码如下：
<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Your browser does not support canvas
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var clockImage = new Image();
var clockImageLoaded = false;
clockImage.onload = function () {
clockImageLoaded = true;
}
clockImage.src = 'images/clock.jpg';
function addBackgroundImage() {
//画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
}
function drawHourHand(theDate) {
}
function drawMinuteHand(theDate) {
}
function drawSecondHand(theDate) {
context.save();
context.fillStyle = 'red';
var seconds = theDate.getSeconds();
context.rotate(degreesToRadians(seconds * 6));
drawHand(150);
context.restore();
}
function drawHand(size) {
context.beginPath();
context.moveTo(0, 0); // center
context.lineTo(-4, -10);
context.lineTo(0, size * -1);
context.lineTo(4, -10);
context.lineTo(0, 0);
context.fill();
}
function writeBrandName() {
}
function createClock() {
addBackgroundImage();
var theDate = new Date();
drawHourHand(theDate);
drawMinuteHand(theDate);
drawSecondHand(theDate);
}
function clockApp() {
if (!clockImageLoaded) {
setTimeout('clockApp()', 100);
return;
}
//把旋转中心放到canvas的当中
context.translate(canvas.width / 2, canvas.height / 2);
setInterval('createClock()', 1000);
}
function degreesToRadians(degrees) {
return (Math.PI / 180) * degrees;
}
clockApp();
</script>
</body>
</html>可以看到秒针已经动起来了。
加上分针与时针
<html>
<head>
<title>Canvas Clock</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Your browser does not support canvas
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var clockImage = new Image();
var clockImageLoaded = false;
clockImage.onload = function () {
clockImageLoaded = true;
}
clockImage.src = 'images/clock.jpg';
function addBackgroundImage() {
//画图，中心点移到了canvas当中，所以画图开始位置变成了-200、-200
context.drawImage(clockImage, canvas.width/2* -1, canvas.height/2 * -1, canvas.width, canvas.height);
}
function drawHourHand(theDate) {
var hours = theDate.getHours() + theDate.getMinutes() / 60;
var degrees = (hours * 360 / 12) % 360;
context.save();
context.fillStyle = 'black';
context.rotate(degreesToRadians(degrees));
drawHand(110, 7);
context.restore();
}
function drawMinuteHand(theDate) {
var minutes = theDate.getMinutes() + theDate.getSeconds() / 60;
context.save();
context.fillStyle = 'black';
context.rotate(degreesToRadians(minutes * 6));
drawHand(130);
context.restore();
}
function drawSecondHand(theDate) {
context.save();
context.fillStyle = 'red';
var seconds = theDate.getSeconds();
context.rotate(degreesToRadians(seconds * 6));
drawHand(150);
context.restore();
}
function drawHand(size, thickness) {
thickness = thickness || 4;
context.beginPath();
context.moveTo(0, 0); // center
context.lineTo(thickness * -1, -10);
context.lineTo(0, size * -1);
context.lineTo(thickness, -10);
context.lineTo(0, 0);
context.fill();
}
function writeBrandName() {
}
function createClock() {
addBackgroundImage();
var theDate = new Date();
drawHourHand(theDate);
drawMinuteHand(theDate);
drawSecondHand(theDate);
}
function clockApp() {
if (!clockImageLoaded) {
setTimeout('clockApp()', 100);
return;
}
//把旋转中心放到canvas的当中
context.translate(canvas.width / 2, canvas.height / 2);
setInterval('createClock()', 1000);
}
function degreesToRadians(degrees) {
return (Math.PI / 180) * degrees;
}
clockApp();
</script>
</body>
</html>效果：
下面还有一些画品牌等代码暂略…
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用HTML5的canvas做一个会动的时钟
- html5学习canvas基本使用：div在js前面；localStorage存储根据浏览器在不同的位置；应用程序缓存；placeholder 属性提供一种提示（hint），描述输入域所期待的值。
- 使用three.js画一个三角形
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数，利用map和reduce操作实现一个string2int()函数
- 使用canvas绘制一个时钟
- three.js使用二：修复three.js的纹理路径多一个\的问题
- 使用HTML5的canvas做一个会动的时钟
- JavaScript学习小结之使用canvas画“哆啦A梦”时钟
- WEB前端开发学习----9. 使用canvas来画个时钟
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（三）
- 做出一个SwitchButton的效果，并详细学习一下onDraw(Canvas canvas)方法的使用
- three.js学习 函数使用方法散记3
- 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
- JavaScript学习小结之使用canvas画“哆啦A梦”时钟
- 通过制作一个简单的时钟学习WPF中DispatcherTimer的使用 Level 100
- 做出一个SwitchButton的效果，并详细学习一下onDraw(Canvas canvas)方法的使用
- 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
- three.js学习 函数使用方法散记2
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（一）
- 使用HTML5 Canvas绘制一个时钟