HTML5 Canvas笔记——绘制方形钟
利用矩形的绘制，颜色与透明度，编程绘制方形钟
要求：
（1）钟面的矩形边框应当是圆角矩形，
（2）边框线要采用除默认色以外其他颜色，
（3）要用某种半透明色来填充矩形的钟面
（4）钟面数字的排列按上图设置，数字的样式自行设定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
body{
background-color:#eee;
}
#canvas{
background-color:#fff;
margin-left:10px;
margin-top:10px;
-webkit-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
FONT_HEIGHT = 15,
MARGIN = 35,
HAND_TRUNCATION =150/25,//时针长度
HOUR_HAND_TRUNCATION = 150/10,
NUMERAL_SPACING = 20,
RADIUS = 250/2 - MARGIN,
HAND_RADIUS = RADIUS + NUMERAL_SPACING;
// 绘制矩形框
function roundedRect(x,y,width,height,radius){
if(width <= 0 || height <= 0){
ctx.arc(x,y,radius,0,Math.PI*2);
return;
}
ctx.moveTo(x+radius,y);
ctx.arcTo(x+width,y,x+width,y+height,radius);
ctx.arcTo(x+width,y+height,x,y+height,radius);
ctx.arcTo(x,y+height,x,y,radius);
ctx.arcTo(x,y,x+radius,y,radius);
}
function drawRoundedRect(strokeStyle,fillStyle,x,y,width,height,radius){
ctx.beginPath();
//画圆角矩形
roundedRect(x,y,width,height,radius);
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillStyle;
ctx.stroke();
ctx.fill();
}
//外矩形边框和填充颜色以及透明度
drawRoundedRect("rgba(105,105,105，0.8)","rgba(245,245,245,1)",canvas.width/2-150, canvas.height/2-150,300,300,25);
//内矩形边框和填充颜色以及透明度
drawRoundedRect("rgba(105,105,105,1)","rgba(255,255,255,0.5)",canvas.width/2-125, canvas.height/2-125,255,255,5);
// 圆心填充和边框
function Rounded(strokeStyle,fillStyle,x,y,width,height,radius){
ctx.beginPath();
// roundedRect(x,y,width,height,radius);
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillStyle;
ctx.stroke();
ctx.fill();
}
function drawCenter() {
ctx.beginPath();
//绘制钟面的圆心
ctx.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
ctx.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;
ctx.moveTo(canvas.width/2, canvas.height/2);
ctx.lineTo(canvas.width/2 + Math.cos(angle)*handRadius,
canvas.height/2 + Math.sin(angle)*handRadius);
ctx.stroke();
}
function drawHands() {
var date = new Date,
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 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 = ctx.measureText(numeral).width;
//计算半径
if(numeral%3==0){
RADIUS_M=HAND_RADIUS;
}else{
RADIUS_M=HAND_RADIUS/Math.cos(Math.PI/6);
}
//文本填充
ctx.fillStyle = '#000000';
ctx.fillText(numeral,
canvas.width/2+ + Math.cos(angle)*(RADIUS_M) - numeralWidth/2,
canvas.height/2-10 + Math.sin(angle)*(RADIUS_M) + FONT_HEIGHT+8);
});
//刻度
ctx.save();
ctx.translate(canvas.width/2,canvas.height/2);
// x=0;y=RADIUS;
for(var i=0; i<60; i++){
//长度，刻度大小
R=(canvas.width-2*MARGIN)/4-100;
if(i%15==0){
RADIUS_H=R;
}
else if(i%15<8){
RADIUS_H=R/Math.cos((Math.PI/30)*(i%15));
}
else if(i%15>=8){
RADIUS_H=R/Math.sin((Math.PI/30)*(i%15));
}
if(i%5 == 0){
ctx.beginPath();
ctx.moveTo(0,RADIUS_H);
ctx.lineTo(0,RADIUS_H+10);
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.rotate(Math.PI/30);
}else{
ctx.beginPath();
ctx.moveTo(0,RADIUS_H);
ctx.lineTo(0,RADIUS_H+10);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.rotate(Math.PI/30);
}
}
ctx.restore();
}
//静态钟面点绘制
function drawClock() {
//隐藏指针走过路
ctx.clearRect(canvas.width/2-90, canvas.height/2-90,180,180);
Rounded("black","grey",140,20,100,100,5);
drawCenter();
drawHands();
drawNumerals();
}
ctx.font = FONT_HEIGHT + 'px Arial';
//定时器事件注册时间间隔1000豪，每隔一秒内点事件处理
loop = setInterval(drawClock, 1000);
</script>
</body>
</html>
效果如图：
