How to use HTML5 Canvas to draw a dot on a web page
This article is about how to use HTML5 Canvas to draw a dot on a web page. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Var clock=document.getElementById ("clock")
Var ctx=clock.getContext ("2d")
Var width= ctx.canvas.width
Var height= ctx.canvas.height
Var r=width / 2
Var rem=width / 200
Function drawBackground () {
Ctx.save ()
/ / draw a circle
Ctx.translate (r, r)
Ctx.beginPath ()
Ctx.arc (0,0, rmuri 5,0,2 * Math.PI, false)
Ctx.lineWidth = 10 * rem
Ctx.stroke ()
/ / draw the clock
Var hoursArr= [3,4,5,6,7,8,9,10,11,12,1,2]
Ctx.font = 18 * rem +'px Arial'
Ctx.textAlign = 'center'
Ctx.textBaseline = 'middle'
HoursArr.forEach (function (number,i) {
Var rad=2*Math.PI / 12 * I
Var x=Math.cos (rad) * (rMurray 28 * rem)
Var y=Math.sin (rad) * (rMurray 28 * rem)
Ctx.fillText (number,x,y)
})
/ / iterate through 60 points and draw time points
For (var iTuno; I < 60th iTunes +) {
Var rad=2*Math.PI / 60 * I
Var x=Math.cos (rad) * (rmuri 16 * rem)
Var y=Math.sin (rad) * (rmuri 16 * rem)
Ctx.beginPath ()
If (I% 5x / 0) {
Ctx.fillStyle ='# 000'
Ctx.arc (xmemy 2 * rem,0,2*Math.PI,false)
} else {
Ctx.fillStyle ='# ccc'
Ctx.arc (xmemy 2 * rem,0,2*Math.PI,false)
}
Ctx.fill ()
}
}
/ / draw time needle and thread
Function drawHour (hour,minute) {
Ctx.save (); / / reserved
Ctx.beginPath ()
Var rad=2*Math.PI / 12 * hour
Var mrad=2*Math.PI / 12 / 60 * minute
Ctx.rotate (rad+mrad); / / rotate
Ctx.moveTo (0Jing 10 * rem); / / Line starting point
Ctx.lineTo (0mai Murr / 2-20 * rem); / / Line end
Ctx.lineWidth=5 * rem;// line width
Ctx.lineCap='round';// line fillet
Ctx.stroke ()
Ctx.restore (); / / restore
}
/ / draw the minute hand
Function drawMinute (minute,second) {
Ctx.save (); / / reserved
Ctx.beginPath ()
Var rad=2*Math.PI / 60 * (minute + second / 60)
Ctx.rotate (rad)
Ctx.moveTo (0Jing 10 * rem); / / Line starting point
Ctx.lineTo (0mai Murr / 2-30 * rem); / / Line end
Ctx.lineWidth=3 * rem;// line width
Ctx.lineCap='round';// line fillet
Ctx.stroke ()
Ctx.restore (); / / restore
}
/ / draw the second hand
Function drawSecond (second) {
Ctx.save ()
Ctx.beginPath ()
Ctx.fillStyle ='# c14543'
Var rad=2*Math.PI / 60 * second
Ctx.rotate (rad)
Ctx.moveTo (- 2 * rem,16 * rem); / / Line starting point
Ctx.lineTo (2 * rem,16 * rem)
Ctx.lineTo (1mam Murr + 18 * rem)
Ctx.lineTo (- 1mai Murr + 18 * rem)
Ctx.fill ()
Ctx.restore ()
}
/ / draw the center origin
Function drawDot () {
Ctx.beginPath ()
Ctx.fillStyle ='# fff'
Ctx.arc (0je 0je 3 * rem,0,2*Math.PI,false)
Ctx.fill ()
}
/ / dynamic
Function draw () {
Ctx.clearRect (0WidthWidthMagheight)
Var now=new Date ()
Var hour= now.getHours ()
Var minute= now.getMinutes ()
Var second= now.getSeconds ()
DrawBackground ()
DrawHour (hour,minute)
DrawMinute (minute,second)
DrawSecond (second)
DrawDot ()
Ctx.restore ()
}
Draw ()
SetInterval (draw,1000)
Thank you for reading! This is the end of this article on "how to use HTML5 Canvas to draw a point on a web page". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
