JS产生不同正方形（画布）【动力学院】

@charset "utf-8";
body {
font-size:12px;
}
canvas {
border:dashed 1px #666;
cursor:pointer;
}
p{
position:absolute;
height:23px;
line-height:23px;
margin-left:10px;
}
span{
padding:3px;
border:solid 1px #ccc;
background-color:#eee;
cursor:pointer;
}
// 函数通过id获取对象
function $$(id) {
return document.getElementByIdx_x_x_x(id);
}
//绘制一个正方形
function drawRect(){
var cnv=$$("cnvMain");
//获取一个画布，将它交给JS来绘画
var cxt=cnv.getContext("2d");
//getContext是一个固定的方法，这里表示在平面上绘画，还有3d
//设置边框
cxt.strokeStyle="#666";//笔触颜色
cxt.lineWidth=2;
cxt.strokeRect(105,70,60,60);//strokeRect()是笔触填充，其实就是边框
}
//上下移动已绘制的正方形
function spn1_click(){
var cnv=$$("cnvMain");
var cxt=cnv.getContext("2d");
cxt.translate(-20,-20);//X,Y方向上面,向左，向上移动20px
drawRect();
cxt.translate(40,40);
drawRect();
}
//缩放已绘制的正方形
function spn2_click(){
var cnv=$$("cnvMain");
var cxt=cnv.getContext("2d");
cxt.scale(1.2,1.2);//X,Y放心均扩大1.2倍
drawRect();
cxt.scale(1.2,1.2);
drawRect();
}
//旋转已绘制的正方形
function spn3_click(){
var cnv=$$("cnvMain");
var cxt=cnv.getContext("2d");
cxt.rotate(Math.PI/8);
//rotate();旋转角度，参数值也可以直接：30deg
drawRect();
cxt.rotate(-Math.PI/4);
drawRect();
}