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

This article mainly introduces how to achieve html5 Canvas path mapping, coordinate transformation application, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

The code is as follows:

Your browser doesn't support it yet.

Var c = document.getElementById ("myCanvas")

Var cxt = c.getContext ("2d")

Var slen = 60

Var mlen = 50

Var hlen = 40

Cxt.strokeRect (0,0, c.width, c.height)

Cxt.beginPath ()

Cxt.strokeStyle = "# 00f"

Cxt.fillStyle = "# 00f"

Cxt.arc (200,150,5,0,2 * Math.PI, true)

Cxt.fill ()

Cxt.closePath ()

Cxt.beginPath ()

Cxt.strokeStyle = "# 00f"

Cxt.arc (200,150,100,0,2 * Math.PI, true)

Cxt.stroke ()

Cxt.closePath ()

Cxt.beginPath ()

Cxt.translate (200150); / / translate the origin

Cxt.rotate (- Math.PI / 2)

Cxt.save ()

For (var I = 0; I < 60; iTunes +) {

If (I% 5 = = 0) {

/ / cxt.fillStyle = "# ff0000"

Cxt.fillRect (80,0,20,5)

Cxt.fillText ("" + (I / 5 = = 0.12: I / 5), 70,0)

} else {

/ / cxt.strokeStyle = "# 00f"

Cxt.fillRect (90,0,10,2)

}

/ / document.getElementById ("div1"). InnerText + = "" + I

Cxt.rotate (Math.PI / 30)

}

Cxt.closePath ()

Var ls = 0, lm = 0, lh = 0

Function Refresh () {

Cxt.restore ()

Cxt.save ()

Cxt.rotate (ls * Math.PI / 30)

Cxt.clearRect (5,-1, slen+1, 2-2)

Cxt.restore (); cxt.save ()

Cxt.rotate (lm * Math.PI / 30)

Cxt.clearRect (5,-1, mlen+1, 3-2)

Cxt.restore (); cxt.save ()

Cxt.rotate (lh * Math.PI / 6)

Cxt.clearRect (5,-3, hlen+1, 4-2)

Var time = new Date ()

Var s = ls=time.getSeconds ()

Var m = lm=time.getMinutes ()

Var h = lh=time.getHours ()

Cxt.restore ()

Cxt.save ()

Cxt.rotate (s * Math.PI / 30)

Cxt.fillRect (5, 0, slen, 2)

Cxt.restore (); cxt.save ()

Cxt.rotate (m * Math.PI / 30)

Cxt.fillRect (5, 0, mlen, 3)

Cxt.restore (); cxt.save ()

Cxt.rotate (h * Math.PI / 6)

Cxt.fillRect (5,-2, hlen, 4)

}

Var MyInterval = setInterval ("Refresh ();", 1000)

Thank you for reading this article carefully. I hope the article "how to realize Canvas path drawing and coordinate transformation application in html5" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.