suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-Übungs-Canvas-Zeichnungsuhr-Beispielcode-Sharing

HTML5-Übungs-Canvas-Zeichnungsuhr-Beispielcode-Sharing

黄舟
黄舟Original
2017-03-21 16:02:481485Durchsuche

Verwenden Sie Leinwand, um eine Uhr zu zeichnen. Kommen wir ohne weitere Umschweife direkt zum Code. Die Darstellung ist wie folgt: 

<!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>

Das obige ist der detaillierte Inhalt vonHTML5-Übungs-Canvas-Zeichnungsuhr-Beispielcode-Sharing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Entwicklung mobiler HTML5-Anwendungen – detaillierte Einführung in die Rolle des Ansichtsfensters (Bilder und Texte)Nächster Artikel：Entwicklung mobiler HTML5-Anwendungen – detaillierte Einführung in die Rolle des Ansichtsfensters (Bilder und Texte)

In Verbindung stehende Artikel

Mehr sehen