How to realize the Application of Canvas path drawing and coordinate Transformation in html5
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!
