Maison >interface Web >Tutoriel H5 >Partage de code d'exemple d'horloge de dessin sur toile d'entraînement HTML5

Partage de code d'exemple d'horloge de dessin sur toile d'entraînement HTML5

黄舟original: 2017-03-21 16:02:481486parcourir

Utilisez canvas pour dessiner une horloge. Sans plus tarder, passons directement au code. Le rendu est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas钟表</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
</style>
</head>
<body onload="run()">
<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字，说明你的浏览器弱爆了！</canvas>
<script>
window.onload=draw;
function draw() {
var canvas=document.getElementById(&#39;canvas&#39;);
var context=canvas.getContext(&#39;2d&#39;);
context.save(); ///////////////////////////////////保存
context.translate(200,200);
var deg=2*Math.PI/12;    
//////////////////////////////////////////////////表盘
context.save();    
context.beginPath();    
for(var i=0;i<13;i++){
var x=Math.sin(i*deg);
var y=-Math.cos(i*deg);
context.lineTo(x*150,y*150);    
}
var c=context.createRadialGradient(0,0,0,0,0,130);
c.addColorStop(0,"#22f");
c.addColorStop(1,"#0ef")
context.fillStyle=c;
context.fill();
context.closePath();    
context.restore();    
//////////////////////////////////////////////////数字
context.save();
context.beginPath();
for(var i=1;i<13;i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
context.fillStyle="#fff";
context.font="bold 20px Calibri";
context.textAlign=&#39;center&#39;;
context.textBaseline=&#39;middle&#39;;
context.fillText(i,x1*120,y1*120);    
}
context.closePath();    
context.restore();    
//////////////////////////////////////////////////大刻度
context.save();
context.beginPath();    
for(var i=0;i<12;i++){
var x2=Math.sin(i*deg);
var y2=-Math.cos(i*deg);
context.moveTo(x2*148,y2*148);
context.lineTo(x2*135,y2*135);    
}    
context.strokeStyle=&#39;#fff&#39;;
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();    
//////////////////////////////////////////////////小刻度
context.save();
var deg1=2*Math.PI/60;
context.beginPath();    
for(var i=0;i<60;i++){
var x2=Math.sin(i*deg1);
var y2=-Math.cos(i*deg1);
context.moveTo(x2*146,y2*146);
context.lineTo(x2*140,y2*140);    
}    
context.strokeStyle=&#39;#fff&#39;;
context.lineWidth=2;
context.stroke();
context.closePath();    
context.restore();    
///////////////////////////////////////////////////文字
context.save();
context.strokeStyle="#fff";
context.font=&#39; 34px sans-serif&#39;;
context.textAlign=&#39;center&#39;;
context.textBaseline=&#39;middle&#39;;
context.strokeText(&#39;canvas&#39;,0,65);    
context.restore();    
/////////////////////////////////////////////////new Date
var time=new Date();
var h=(time.getHours()%12)*2*Math.PI/12;
var m=time.getMinutes()*2*Math.PI/60;
var s=time.getSeconds()*2*Math.PI/60;

////////////////////////////////////////////////时针
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginPath();
context.moveTo(0,6);
context.lineTo(0,-85);
context.strokeStyle="#fff";
context.lineWidth=6;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginPath();
context.moveTo(0,8);
context.lineTo(0,-105);
context.strokeStyle="#fff";
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.strokeStyle="#fff";
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();    
context.restore();/////////////////////////////栈出
setTimeout(draw, 1000);/////////////////////////////计时器

}

</script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Développement d'applications mobiles HTML5 - introduction détaillée au rôle de la fenêtre d'affichage (images et textes)Article suivant：Développement d'applications mobiles HTML5 - introduction détaillée au rôle de la fenêtre d'affichage (images et textes)

Articles Liés

Voir plus