<!DOCTYPE HTML>
<html>
<head>
<title>test rotate</title>
<script type=
"text/javascript"
>
function startup() {
var canvas = document.getElementById(
'canvas'
);
var ctx = canvas.getContext(
'2d'
);
var img =
new
Image();
img.src =
'Penguins.jpg'
;
img.onload = function() {
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(30 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 164, 164);
}
}
</script>
</head>
<body onload=
'startup();'
>
<div id=
"pw_body"
style=
"width:100%;height:100%"
>
<canvas id=
"canvas"
style=
"position: absolute; left: 300px; top: 300px;"
width=
"800"
height=
"600"
></canvas>
</div>
</body>
</html>