Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.