Basic idea:
First draw a rectangular background and set the color to gray. Draw a simple rectangular outer border on the background, then draw an inner border, and then load the selected image as the background image inside the electronic clock. Then start drawing the clock scale,
draw the minute scale, and finally get the current system time and draw three handles for hours, minutes and seconds.
Technical points:Use HTML5's Canvas 2D drawing object, mainly using the context.save() and context.restore() methods to save
Drawing state and resetting the drawing state, use the Transform and fillRect() methods to draw the clock and minute scale. Use the
drawImage() method to draw the background image, and use the setTimeout() method to refresh the time display.
Detailed code explanation:The code to obtain the HTML5 Canvas drawing object is as follows:
var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500);
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(245, 245);
for (var i=0; i <= 12; i++) {
// top
ctx.fillRect(160,-7.5,30,10);
ctx.strokeRect(160,-7.5,30,10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
var sin = Math.sin(Math.PI/30);
var cos = Math.cos(Math.PI/30);
for (var i=0; i <= 60; i++) {
ctx.fillRect(170,-5,10,2);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.translate(245, 245);
ctx.save();
ctx.restore();
It is not good to refresh and load the image object every time OK, I tested it in Google browser. It is recommended to run the above code in google browser. The above is the detailed introduction of the graphic and text code of the HTML5 component Canvas to implement the electronic clock. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
<script>
window.onload = function() {
clockHand();
};
function clockHand() {
var canvas = document.getElementById("canvas1");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
// create background rectangle
// ctx.lineWidth = 10;
ctx.fillStyle = "gray";
ctx.fillRect(0,0,500,500);
// draw frame
ctx.lineWidth = 10;
ctx.strokeStyle = "green";
ctx.strokeRect(0,0,500,500);
// draw author infomation
ctx.fillStyle = "blue";
ctx.font = "20px Times New Roman";
ctx.fillText("-created by gloomyfish", 150, 30);
// draw inner rectangle
ctx.lineWidth = 10;
ctx.strokeStyle = "black";
ctx.strokeRect(45,45,400,400);
// create background image
var img=new Image();
img.src="background.png";
img.onload = function() {
ctx.drawImage(img,45,45,400,400);
ctx.save();
// draw marker unit
ctx.lineWidth = 2;
ctx.fillStyle = "purple";
ctx.strokeStyle = "black";
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(245, 245);
for (var i=0; i <= 12; i++) {
// top
ctx.fillRect(160,-7.5,30,10);
ctx.strokeRect(160,-7.5,30,10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
// transform back center point
// ctx.translate(245, 245);
var sin = Math.sin(Math.PI/30);
var cos = Math.cos(Math.PI/30);
for (var i=0; i <= 60; i++) {
ctx.fillRect(170,-5,10,2);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.restore();
// top
ctx.fillText("12", 233,100);
// bottom
ctx.fillText("6", 240,400);
// left
ctx.fillText("9", 90,252);
// right
ctx.fillText("3", 395,250);
// get time
ctx.save();
ctx.translate(245, 245);
ctx.save();
// dynamic show time
var now=new Date();
var hrs=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
//Draw hour hand
ctx.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600)));
ctx.beginPath();
ctx.moveTo(0,10);
ctx.lineTo(0,-60);
ctx.stroke();
ctx.restore();
ctx.save();
//Draw minute hand
ctx.rotate(Math.PI/30*(min+(sec/60)));
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(0,-110);
ctx.stroke();
ctx.restore();
ctx.save();
//Draw second hand
ctx.rotate(Math.PI/30*sec);
ctx.strokeStyle="#E33";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(0,-110);
ctx.stroke();
ctx.restore();
// finally store to originall point
ctx.restore();
setTimeout(clockHand,1000);
};
}
</script>