<!DOCTYPE html >
<html>
<head>
<meta charset="gb2312" />
<title>canvas 旋转</title>
<script type="text/javascript" src="js1.js"></script>
</head>
<body onload="pageload();">
<canvas id="cnvMain" width="500" height="500"> 浏览器不支持canvas绘图操作
</canvas>
</body>
</html>
==================================================
function $$(id){
return document.getElementById(id);
}
function pageload(){
var cnv=$$("cnvMain");
var cxt=cnv.getContext("2d");
cxt.fillStyle="rgb(255,0,0)";
cxt.fillRect(200,200,100,100);//画正方形
cxt.translate(200,200);//原点移动到200,200
for(var i=0;i<5;i++){
cxt.fillStyle="rgb("+50*i+","+retRndNum(2)+",23)";
cxt.rotate(0.3+0.1*i);//旋转
cxt.fillRect(0,0,100,100);//填充正方形
}
//产生随机数字
function retRndNum(n){
var strRnd="";
for(var intI=0;intI<n;intI++){
strRnd+=Math.floor(Math.random()*10);
}
return strRnd;
}
}
原文：http://www.cnblogs.com/aicpcode/p/4266580.html