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>