var canvas=document.getElementById('canvas'),
ctx=canvas.getContext('2d'),
FONT_HEIGHT=15, //字体高度
MARGIN=35, //边缘
HAND_TRUNCATION=canvas.width/25,
HOUR_HAND_TRUNCATION=canvas.width/10,
NUMERAL_SPACING=20,
RADIUS=canvas.width/2-MARGIN,
HAND_RADIUS=RADIUS+NUMERAL_SPACING;
function drawCircle(){
ctx.beginPath();
ctx.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);
ctx.stroke();
} //画出时钟的圆框轮廓
function drawNumerals(){ctx.beginPath();
ctx.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);
ctx.stroke();
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;
ctx.fillText(numeral,canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
});
} //画出时钟的12小时刻度
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 drawClock(){
drawCircle();
drawCenter();
drawHands();
drawNumerals();
}
ctx.font=FONT_HEIGHT+'ps Arial';loop=setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawClock();},1000);
In der Funktion drawNumerals(){
..........
}, var-Zahlen=[1,2,3,4,5,6,7,8,9,10,11, 12] ,
angle=0,
numeralWidth=0;Der erste definiert ein Array, der zweite definiert den Startbogenmaß und der dritte definiert die Breite des Arrays?
In Array-Traversal numericals.forEach(function(numeral){
angle=Math.PI/6*(numeral-3);
numeralWidth=ctx.measureText(numeral).width;
ctx.fillText(numeral,canvas. width /2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
});
angle=Math . PI/6*(Ziffer-3);Was bedeutet dieser Algorithmus?
ctx.fillText(numeral,canvas.width/2+Math.cos(aangle)*(HAND_RADIUS)-numeralWidth/2,
canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3) ;
Was bedeutet dieser Algorithmus?
Zwei Abschnitte der Funktion drawHand(loc,isHour){
. . . . . .
}
function drawHand(){
........
}Ich verstehe die Funktion auch nicht so gut.
Endlich ctx.font=FONT_HEIGHT+"ps Arial"; ist das die dort eingestellte Schriftart?
setInterval(); Ich erinnere mich, dass es bereits eine Schleife ist. Warum muss ich loop=setInterval(); hinzufügen?
Was bedeutet das? Ich hoffe, dass mir jemand zu den Dingen weiterhelfen kann, die ich oben nicht verstehe. Da ich ein Neuling bin, kann es sein, dass ich bei meinen Fragen nicht allzu gründlich vorgehe, daher entschuldige ich mich für Ihr Verständnis.
首先，自己不懂，为什么不逐步调试呢？
第二，贴出来的代码这么乱，你自己读读好读吗？
既然回你了 就简单讲讲
写了这些，好像这个是网上的例子吧，应该有视频的，你都不愿意百度的，我也是服 Canvas 绘制时钟。
ctx.font的问题，你知道ctx是什么了，就知道他是设置哪的字体了？ctx哪里来，代码上有定义。不懂请百度Google。至于你说
loop=setInterval的问题，自己查setInterval。简单来说loop是这个定时器返回的一个标识，在你不需要这个定时器的时候，可以使用clearInterval(定时器标识)来清除这个定时器。最后 答案一直都放在那里，只是你是否愿意去找。