Canvas rotate- 旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> </head> <body> <canvas id='myCanvas' width='800' height='600'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.strokeStyle = '#000000'; ctx.strokeRect(200, 50, 100, 50); ctx.rotate(0.25 * Math.PI); ctx.beginPath(); ctx.strokeStyle = '#ff0000'; ctx.strokeRect(200, 50, 100, 50); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> </head> <body> <canvas id='myCanvas' width='800' height='600'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.strokeStyle = '#000000'; ctx.strokeRect(200, 50, 100, 50); ctx.translate(250,75); ctx.rotate(0.25 * Math.PI); ctx.translate(-250,-75); ctx.beginPath(); ctx.strokeStyle = '#ff0000'; ctx.strokeRect(200, 50, 100, 50); ctx.arc(250,75,2,0,2*Math.PI,true); ctx.stroke(); </script> </body> </html>