当前位置：前端开发者 > HTML > 正文

前端canvas时钟学习成果

2018-09-16 23:04:54 分类：HTML 阅读(139) 评论(0)

前端开发项目实战前端开发项目论文 web前端开发项目经验描述

html 代码

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>canvas clock</title>

<style type=”text/css”>

div {

text-align: center;

margin-top: 250px;

}

</style>

</head>

<body>

<div>

<canvas id=”clock” width=”300″ height=”300″>您的浏览器不支持canvas</canvas>

</div>

<script type=”text/javascript”>

window.onload = function () {

var c = document.getElementById(“clock”);

var ctx = c.getContext(‘2d’);

var width = ctx.canvas.width;

var height = ctx.canvas.width;

var r = width / 2;

var rem = width / 200;

function drawBackground() {

ctx.save();

ctx.translate(r, r);

ctx.beginPath();

ctx.lineWidth = 10 * rem;

ctx.arc(0, 0, r – ctx.lineWidth / 2, 0, 2 * Math.PI);

ctx.stroke();

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

ctx.font = 18 * rem + “px Arial”;

ctx.textAlign = “center”;

ctx.textBaseline = “middle”;

hourNumbers.forEach(function (number, i) {

var rad = 2 * Math.PI / 12 * i;

var x = Math.cos(rad) * (r – 30 * rem);

var y = Math.sin(rad) * (r – 30 * rem);

ctx.fillText(number, x, y);

})

for (var i = 0; i < 60; i++) {

var rad = 2 * Math.PI / 60 * i;

var x = Math.cos(rad) * (r – 15 * rem);

var y = Math.sin(rad) * (r – 15 * rem);

ctx.beginPath();

if (i % 5 == 0) {

ctx.fillStyle = ‘#000’;

ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI)

}

else {

ctx.fillStyle = ‘#ccc’;

ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI)

}

ctx.fill();

}

}

function drawHour(hour, minute) {

ctx.save();

ctx.beginPath();

var rad = 2 * Math.PI / 12 * hour;

var mrad = 2 * Math.PI / 12 / 60 * minute;

ctx.rotate(rad + mrad);

ctx.lineWidth = 6 * rem;

ctx.lineCap = ’round’;

ctx.moveTo(0, 10 * rem);

ctx.lineTo(0, -r / 2);

ctx.stroke();

ctx.restore()

}

function drawMinute(minute) {

ctx.save();

ctx.beginPath();

var rad = 2 * Math.PI / 60 * minute;

ctx.rotate(rad);

ctx.lineWidth = 3 * rem;

ctx.lineCap = ’round’;

ctx.moveTo(0, 10 * rem);

ctx.lineTo(0, -r + 35 * rem);

ctx.stroke();

ctx.restore()

}

function drawSecond(second) {

ctx.save();

ctx.beginPath();

ctx.fillStyle = ‘#c14543’;

var rad = 2 * Math.PI / 60 * second;

ctx.rotate(rad);

ctx.moveTo(-2 * rem, 20 * rem);

ctx.lineTo(2 * rem, 20 * rem);

ctx.lineTo(1, -r + 18 * rem);

ctx.lineTo(-1, -r + 18 * rem);

ctx.fill();

ctx.restore()

}

function drawDot() {

ctx.beginPath();

ctx.fillStyle = ‘#fff’;

ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI);

ctx.fill();

}

function draw() {

ctx.clearRect(0, 0, width, height)

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

drawBackground();

drawHour(hour, minute);

drawMinute(minute);

drawSecond(second);

drawDot();

ctx.restore();

}

draw();

setInterval(draw, 1000)

}

</script>

</body>

前端开发项目经验总结 1000元的前端开发项目前端项目开发问题

» 本文来自：前端开发者 » 《前端canvas时钟学习成果》

» 本文链接地址：https://www.rokub.com/5739.html

» 您也可以订阅本站：https://www.rokub.com

标签：前端开发者

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册

回顶
回顶部