Using HTML5 canvas to draw clock code example sharing

Time:2021-11-23

HTML5 is powerful enough to achieve many functions. Drawing a clock is just a gadget. The picture pointer can be realized by CTX’s DrawImage. As for compatibility, there are many online solutions. This stuff is for playing, not for application. Learn the canvas API.

Let’s show you the renderings first

Implementation code

Copy code

The code is as follows:

<script type=”text/javascript”>
// <![CDATA[
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
Var weekday = {: ‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’};
h=h>? (h-)*+parseInt(m/):h*+parseInt(m/); // Initial position of hour hand
//=====================================
var x=,y=,sAngle=; // X y origin second hand angle variable
function draw()
{
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“d”);
ctx.clearRect(,,c.width,c.height);
s++;// second hand
//Background
ctx.fillStyle = ‘#eee’ // Make changes to the settings
ctx.globalAlpha = .;
ctx.fillRect(,,c.width,c.height); // Draw a rectangle with new settings
//===Fill (indicate) origin===
ctx.beginPath();
ctx.arc(x,y,,,true);
ctx.fill();
ctx.closePath();
var grd=ctx.createLinearGradient(x,y,,);
grd.addColorStop(,”#FF”);
grd.addColorStop(.,”#FF”);
grd.addColorStop(,”#FF”);
ctx.fillStyle=grd;
ctx.font = “pt Arial”;
ctx.fillText(“html”,,);
ctx.save();
//Time scale
for(var i=;i<;i++)
{
var angle=(Math.PI*)/;
ctx.beginPath();
var b=i==||i==||i==||i==
if(i%==){
if(b){
ctx.fillStyle=”red”;
radius=;
}
else{
ctx.fillStyle=”blue”;
radius=.;
}
ctx.font=”px Arial”;
ctx.fillText(i/==?:i/,x-,y-); // X large right small left y large digital scale
}
else
{
ctx.fillStyle=”#”;
radius=;
}
if(s==i)radius=radius+;
ctx.arc(x,y-,radius,,true);
ctx.fill();
transform(ctx,x,y,angle,true);
}
ctx.restore();
//==========================
sAngle=(Math.PI*)/*s; // Second degree
ctx.save(); // Hour hand
ctx.fillStyle=”red”;
// ctx.strokeStyle=”red”;
ctx.lineWidth=;
transform(ctx,x,y,(Math.PI*)/*h,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
ctx.save();// Minute hand rotation
ctx.fillStyle=”blue”;
ctx.lineWidth=;
transform(ctx,x,y,(Math.PI*)/*m,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
//Second hand rotation
ctx.save();
ctx.fillStyle=”#”;
transform(ctx,x,y,sAngle,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
//Data sorting
if(s%==){
sAngle=,s=,m++;
If (M = =) {/ / rotate every 12 minutes
if(m!=)h++;
if(m%==)m=;
}
if(h%==)h=;
};
//*Note: if you put it outside to judge the minute hand or hour hand rotation, it will run repeatedly when the conditions are met. The reason is that only the second hand changes at any time every time it is executed*//
Var datestring = time. Getfullyear() + “year” + (time. Getmonth() +) + “month” + time. Getdate() + “day” + weekday [time. Getday()] + “H:” + time. Gethours() + “m:” + m + “s:” + s;
document.getElementById(“d”).innerHTML=dateString;
}
//Pointer triangle!
function sj(ctx,x,y,x,y,x,y){
//====Example====
// ctx.beginPath();
// ctx.moveTo(x,y);
// ctx.lineTo(x,y-);
// ctx.stroke();
// ctx.beginPath();
//
// ctx.moveTo(x-,y-);
// ctx.lineTo(x+,y-);
// ctx.lineTo(x,y–);
// ctx.fill();
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.lineTo(x,y);
ctx.fill();
}
//Rotate according to coordinates
function transform(ctx,x,y,angle,b){
If (b) {/ / clockwise
ctx.transform(Math.cos(angle), Math.sin(angle),
-Math.sin(angle), Math.cos(angle),
x*(-Math.cos(angle)) + x*Math.sin(angle),
y*(-Math.cos(angle)) – y*Math.sin(angle))
}
}
//=====Execution per second ============ (execution event optional)
window.setInterval(function(){draw()},);
//Window. Onload = function() {/ / the effect is the same as above
// setInterval(“draw()”,);
// };
// ]]>
</script>