利用矩形的繪制，顏色與透明度，編程繪制方形鐘
要求：
（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>
效果如圖：
