<!DOCTYPE html>
<html>
<head>
<title>A Simple Canvas Example</title>
</head>
<body>
<!-- 通过设置width和height属性会改变canvas本身大小以及绘图大小 -->
<!-- 通过css设置width和height只会改变canvas本身大小-->
<canvas id="canvas" width="600" height="600">
Canvas not supported(浏览器在不支持canvas元素时显示)
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var FONT_HEIGHT = 15;
var MARGIN = 35;
var HAND_TRUNCATION = canvas.width/25;
var HOUR_HAND_TRUNCATION = canvas.width/10;
var NUMERAL_SPACING = 20;
var RADIUS = canvas.width/2 - MARGIN;
var HAND_RADIUS = RADIUS + NUMERAL_SPACING;
// Function-------------------------
function drawCircle() {
context.beginPath();
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];
var angle = 0;
var 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_TRUNCATION - HOUR_HAND_TRUNCATION
: RADIUS - HAND_TRUNCATION;
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;
var 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();
}
context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock, 1000);
</script>
</body>
</html>
canvas绘制时钟
最新推荐文章于 2022-05-11 19:24:55 发布