本章节不是Three.JS内容,而是Canvas内容
本文学习资源来自:
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>
效果:
下面还有一些画品牌等代码暂略…