昨天晚上，和搞C的朋友在一起，闲来无事，商量着一人搞一个俄罗斯玩玩吧，几天之后拿出来比比谁的更有特色，结果我打算使用HTML5写一个俄罗斯方块。
自己写了一些俄罗斯方块的函数，现记下，分享给有需要的人（方法都是最原始的方法，有问题望多多指教）。
后来改写后成型的HTML5俄罗斯方块体验地址：http://www.9k6.net/games
以下的图形都是已经设置了方向，可以随意旋转，配置自定义颜色和坐标
1、三叉图形：
View Code
/* * * @以长矩形的底边中心为pointX，pointY * @point Array * 0,1,2,3 大矩形 * 4,5,6,7 小矩形 * 8，9 分割线初始点 * 10,11 第二个分割线点 * 12,13 第三个分割线点 * 14,15 第四个分割线点 * @cans obj canvas对象 * @direction str 方向 * @pointX,pointY int 旋转点坐标 * @stepLength(全) int 单个方块大小 * @color str 方块填充颜色 * */ function getTShape(cans,direction,pointX,pointY,color){ var pointArr = new Array(); switch(direction){ case 'down': pointArr[0] = pointX-stepLength*3/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*3; pointArr[3] = stepLength; pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY+stepLength/2; pointArr[6] = stepLength; pointArr[7] = stepLength; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX-stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY-stepLength/2; break; case 'left': pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength*3/2; pointArr[2] = stepLength; pointArr[3] = stepLength*3; pointArr[4] = pointX-stepLength*3/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = stepLength; pointArr[7] = stepLength; pointArr[8] = pointX+stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX-stepLength/2; pointArr[11] = pointY-stepLength/2; pointArr[12] = pointX-stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength/2; break; case 'right': pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength*3/2; pointArr[2] = stepLength; pointArr[3] = stepLength*3; pointArr[4] = pointX+stepLength/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = stepLength; pointArr[7] = stepLength; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY-stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX-stepLength/2; pointArr[15] = pointY+stepLength/2; break; default: pointArr[0] = pointX-stepLength*3/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*3; pointArr[3] = stepLength; pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY-stepLength*3/2; pointArr[6] = stepLength; pointArr[7] = stepLength; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY+stepLength/2; pointArr[10] = pointX-stepLength/2; pointArr[11] = pointY-stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY-stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength/2; break; } cans.fillStyle = color; cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//大矩形 cans.fillRect(pointArr[4],pointArr[5],pointArr[6],pointArr[7]);//小矩形 cans.strokeStyle = '#FFF'; cans.lineWidth = 1; cans.beginPath(); cans.moveTo(pointArr[8],pointArr[9]); cans.lineTo(pointArr[10],pointArr[11]); cans.lineTo(pointArr[12],pointArr[13]); cans.lineTo(pointArr[14],pointArr[15]); cans.stroke(); }
函数特点：可以自定颜色，自定中心点坐标，可以自定旋转方向（注意：stepLength为全局变量，含义为单个方块的边长）
2、一字形：
View Code
/* * * @以第二个方块中心为pointX，pointY * @point Array * 0,1,2,3 大矩形 * 4,5,6,7 第一条分割线 * 8,9,10,11 第二个分割线线 * 12,13,14,15 第三个分割线线 * @cans obj canvas对象 * @direction str 方向 * @pointX,pointY int 旋转点坐标 * @stepLength(全) int 单个方块大小 * @color str 方块填充颜色 * */ function getLShape(cans,direction,pointX,pointY,color){ var pointArr = new Array(); switch(direction){ case 'up': pointArr[0] = pointX-stepLength*3/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*4; pointArr[3] = stepLength; pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = pointX-stepLength/2; pointArr[7] = pointY+stepLength/2; pointArr[8] = pointX+stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX+stepLength*3/2; pointArr[13] = pointY-stepLength/2; pointArr[14] = pointX+stepLength*3/2; pointArr[15] = pointY+stepLength/2; break; default: pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength*3/2; pointArr[2] = stepLength; pointArr[3] = stepLength*4; pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = pointX+stepLength/2; pointArr[7] = pointY-stepLength/2; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY+stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX-stepLength/2; pointArr[13] = pointY+stepLength*3/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength*3/2; break; } cans.fillStyle = color; cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//矩形 cans.strokeStyle = '#FFF'; cans.lineWidth = 2; cans.beginPath(); cans.moveTo(pointArr[4],pointArr[5]); cans.lineTo(pointArr[6],pointArr[7]); cans.stroke(); cans.beginPath(); cans.moveTo(pointArr[8],pointArr[9]); cans.lineTo(pointArr[10],pointArr[11]); cans.stroke(); cans.beginPath(); cans.moveTo(pointArr[12],pointArr[13]); cans.lineTo(pointArr[14],pointArr[15]); cans.stroke(); }
函数特点：两种方向，横、纵向，以第二个方块为中心旋转
3、田字形：
View Code
/* * * @以左上第一个方块中心为pointX，pointY * @point Array * 0,1,2,3 大矩形 * 4,5,6,7 第一条分割线 * 8,9,10,11 第二个分割线线 * @cans obj canvas对象 * @pointX,pointY int 起始点坐标 * @stepLength(全) int 单个方块大小 * @color str 方块填充颜色 * */ function getOShape(cans,pointX,pointY,color){ var pointArr = new Array(); pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*2; pointArr[3] = stepLength*2; pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY+stepLength/2; pointArr[6] = pointX+stepLength*3/2; pointArr[7] = pointY+stepLength/2; pointArr[8] = pointX+stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY+stepLength*3/2; cans.fillStyle = color; cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//矩形 cans.strokeStyle = '#FFF'; cans.lineWidth = 2; cans.beginPath(); cans.moveTo(pointArr[4],pointArr[5]); cans.lineTo(pointArr[6],pointArr[7]); cans.stroke(); cans.beginPath(); cans.moveTo(pointArr[8],pointArr[9]); cans.lineTo(pointArr[10],pointArr[11]); cans.stroke(); }
特点：无
4、F形（两种，共八个方向）：
View Code
/* * * @以左上第一个方块中心为pointX，pointY * @point Array * 0,1,2,3 第一个矩形(中心所在的矩形) * 4,5,6,7 第二个矩形 * 8,9,10,11 第一条分割线 * 12,13,14,15 第二个分割线线 * 16,17,18,19 第三个分割线线 * @cans obj canvas对象 * @pointX,pointY int 起始点坐标 * @stepLength(全) int 单个方块大小 * @color str 方块填充颜色 * @flag int 类型（-|向下座向为1，右为0） * */ function getEShapeLib(cans,direction,pointX,pointY,color,flag){ var pointArr = new Array(); switch(direction){ case 'down': pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength*3/2; pointArr[2] = stepLength; pointArr[3] = stepLength*2; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY-stepLength/2; pointArr[12] = pointX-stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength/2; if(flag==1){ pointArr[4] = pointX-stepLength*3/2; pointArr[5] = pointY+stepLength/2; pointArr[6] = stepLength*2; pointArr[7] = stepLength; pointArr[16] = pointX-stepLength/2; pointArr[17] = pointY+stepLength/2; pointArr[18] = pointX-stepLength/2; pointArr[19] = pointY+stepLength*3/2; }else{ pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY+stepLength/2; pointArr[6] = stepLength*2; pointArr[7] = stepLength; pointArr[16] = pointX+stepLength/2; pointArr[17] = pointY+stepLength/2; pointArr[18] = pointX+stepLength/2; pointArr[19] = pointY+stepLength*3/2; } break; case 'up': pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength; pointArr[3] = stepLength*2; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY-stepLength/2; pointArr[12] = pointX-stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength/2; if(flag==1){ pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY-stepLength*3/2; pointArr[6] = stepLength*2; pointArr[7] = stepLength; pointArr[16] = pointX+stepLength/2; pointArr[17] = pointY-stepLength*3/2; pointArr[18] = pointX+stepLength/2; pointArr[19] = pointY-stepLength/2; }else{ pointArr[4] = pointX-stepLength*3/2; pointArr[5] = pointY-stepLength*3/2; pointArr[6] = stepLength*2; pointArr[7] = stepLength; pointArr[16] = pointX-stepLength/2; pointArr[17] = pointY-stepLength*3/2; pointArr[18] = pointX-stepLength/2; pointArr[19] = pointY-stepLength/2; } break; case 'left': pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*2; pointArr[3] = stepLength; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX-stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY-stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength/2; if(flag==1){ pointArr[4] = pointX-stepLength*3/2; pointArr[5] = pointY-stepLength*3/2; pointArr[6] = stepLength; pointArr[7] = stepLength*2; pointArr[16] = pointX-stepLength*3/2; pointArr[17] = pointY-stepLength/2; pointArr[18] = pointX-stepLength/2; pointArr[19] = pointY-stepLength/2; }else{ pointArr[4] = pointX-stepLength*3/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = stepLength; pointArr[7] = stepLength*2; pointArr[16] = pointX-stepLength*3/2; pointArr[17] = pointY+stepLength/2; pointArr[18] = pointX-stepLength/2; pointArr[19] = pointY+stepLength/2; } break; default://right pointArr[0] = pointX-stepLength*3/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*2; pointArr[3] = stepLength; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX-stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY-stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength/2; if(flag==1){ pointArr[4] = pointX+stepLength/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = stepLength; pointArr[7] = stepLength*2; pointArr[16] = pointX+stepLength/2; pointArr[17] = pointY+stepLength/2; pointArr[18] = pointX+stepLength*3/2; pointArr[19] = pointY+stepLength/2; }else{ pointArr[4] = pointX+stepLength/2; pointArr[5] = pointY-stepLength*3/2; pointArr[6] = stepLength; pointArr[7] = stepLength*2; pointArr[16] = pointX+stepLength/2; pointArr[17] = pointY-stepLength/2; pointArr[18] = pointX+stepLength*3/2; pointArr[19] = pointY-stepLength/2; } break; } /**/ cans.clearRect(0,0,460,800); /**/ cans.fillStyle = color; cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//大矩形 cans.fillRect(pointArr[4],pointArr[5],pointArr[6],pointArr[7]);//小矩形 cans.strokeStyle = '#FFF'; cans.lineWidth = 2; cans.beginPath(); cans.moveTo(pointArr[8],pointArr[9]); cans.lineTo(pointArr[10],pointArr[11]); cans.stroke(); cans.beginPath(); cans.moveTo(pointArr[12],pointArr[13]); cans.lineTo(pointArr[14],pointArr[15]); cans.stroke(); cans.beginPath(); cans.moveTo(pointArr[16],pointArr[17]); cans.lineTo(pointArr[18],pointArr[19]); cans.stroke(); }
特点：flag是界定两种方向的形状的标志
5、Z形：
View Code
/* * * @以左上第一个方块中心为pointX，pointY * @point Array * 0,1,2,3 第一个矩形(中心所在的矩形) * 4,5,6,7 第二个矩形 * 8,9,10,11 第一条分割线 * 12,13,14,15 第二个分割线线 * 16,17,18,19 第三个分割线线 * @cans obj canvas对象 * @pointX,pointY int 起始点坐标 * @stepLength(全) int 单个方块大小 * @color str 方块填充颜色 * @flag int 类型（-|向下座向为1，右为0） * */ function getZShapeLib(cans,direction,pointX,pointY,color,flag){ var pointArr = new Array(); switch(direction){ case 'up': if(flag==1){ pointArr[0] = pointX-stepLength*3/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*2; pointArr[3] = stepLength; pointArr[4] = pointX-stepLength/2; pointArr[5] = pointY+stepLength/2; pointArr[6] = stepLength*2; pointArr[7] = stepLength; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX-stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX+stepLength/2; pointArr[15] = pointY+stepLength*3/2; }else{ pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength*2; pointArr[3] = stepLength; pointArr[4] = pointX-stepLength*3/2; pointArr[5] = pointY+stepLength/2; pointArr[6] = stepLength*2; pointArr[7] = stepLength; pointArr[8] = pointX+stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX-stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX-stepLength/2; pointArr[15] = pointY+stepLength*3/2; } break; default://right if(flag==1){ pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength/2; pointArr[2] = stepLength; pointArr[3] = stepLength*2; pointArr[4] = pointX+stepLength/2; pointArr[5] = pointY-stepLength*3/2; pointArr[6] = stepLength; pointArr[7] = stepLength*2; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY+stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY+stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY-stepLength/2; pointArr[14] = pointX+stepLength*3/2; pointArr[15] = pointY-stepLength/2; }else{ pointArr[0] = pointX-stepLength/2; pointArr[1] = pointY-stepLength*3/2; pointArr[2] = stepLength; pointArr[3] = stepLength*2; pointArr[4] = pointX+stepLength/2; pointArr[5] = pointY-stepLength/2; pointArr[6] = stepLength; pointArr[7] = stepLength*2; pointArr[8] = pointX-stepLength/2; pointArr[9] = pointY-stepLength/2; pointArr[10] = pointX+stepLength/2; pointArr[11] = pointY-stepLength/2; pointArr[12] = pointX+stepLength/2; pointArr[13] = pointY+stepLength/2; pointArr[14] = pointX+stepLength*3/2; pointArr[15] = pointY+stepLength/2; } break; } /**/ cans.clearRect(0,0,460,800); /**/ cans.fillStyle = color; cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//大矩形 cans.fillRect(pointArr[4],pointArr[5],pointArr[6],pointArr[7]);//小矩形 cans.strokeStyle = '#FFF'; cans.lineWidth = 2; cans.beginPath(); cans.moveTo(pointArr[8],pointArr[9]); cans.lineTo(pointArr[10],pointArr[11]); cans.lineTo(pointArr[12],pointArr[13]); cans.lineTo(pointArr[14],pointArr[15]); cans.stroke(); }
特点：两种方向，flag界定。
以上是俄罗斯方块的几种形状，当然方法有很多种，你也可以使用线条路径然后填充的方法。
全部代码（使用了jQuery）：
View Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; 1000px}
canvas{border:2px dashed #CCC}
#can1{float:left}
#can2{float:right}
</style>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var cans = $('#can1').get(0).getContext('2d');
var stepLength = 30; // 全局变量，单个方块的宽度
var canWidth = 371;
var canHeight = 619;
var dir = ['up','left','down','right'];
var intNum =0;
function getL(){
intNum = (intNum==4)?0:intNum;
//getTShape(cans,dir[intNum],200,200,'#D54D34');
//getTShape(cans,dir[intNum],300,400,'red');
//cans.translate(-40,-50);
getTShape(cans,dir[intNum],171,325,'red');
intNum++;
}
$('canvas').click(getL);
/*
*框线绘画
*
*/
var intX = Math.floor(canWidth/stepLength);
var intY = Math.floor(canHeight/stepLength);
for(var i=1;i<intX;i++){
cans.lineWidth = 1;
cans.strokeStyle = '#ddd';
cans.beginPath();
cans.moveTo(i*(stepLength+1),0);
cans.lineTo(i*(stepLength+1),canHeight);
cans.closePath();
cans.stroke();
}
for(var i=1;i<intY;i++){
cans.lineWidth = 1;
cans.strokeStyle = '#ddd';
cans.beginPath();
cans.moveTo(0,i*(stepLength+1));
cans.lineTo(canWidth,i*(stepLength+1));
cans.closePath();
cans.stroke();
}
/*
*
* @以长矩形的底边中心为pointX，pointY
* @point Array
* 0,1,2,3 大矩形
* 4,5,6,7 小矩形
* 8，9 分割线初始点
* 10,11 第二个分割线点
* 12,13 第三个分割线点
* 14,15 第四个分割线点
* @cans obj canvas对象
* @direction str 方向
* @pointX,pointY int 旋转点坐标
* @stepLength(全) int 单个方块大小
* @color str 方块填充颜色
*
*/
function getTShape(cans,direction,pointX,pointY,color){
var pointArr = new Array();
switch(direction){
case 'down':
pointArr[0] = pointX-stepLength*3/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*3;
pointArr[3] = stepLength;
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY+stepLength/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX-stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY-stepLength/2;
break;
case 'left':
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength*3/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*3;
pointArr[4] = pointX-stepLength*3/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength;
pointArr[8] = pointX+stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX-stepLength/2;
pointArr[11] = pointY-stepLength/2;
pointArr[12] = pointX-stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength/2;
break;
case 'right':
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength*3/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*3;
pointArr[4] = pointX+stepLength/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY-stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX-stepLength/2;
pointArr[15] = pointY+stepLength/2;
break;
default:
pointArr[0] = pointX-stepLength*3/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*3;
pointArr[3] = stepLength;
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY-stepLength*3/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY+stepLength/2;
pointArr[10] = pointX-stepLength/2;
pointArr[11] = pointY-stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY-stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength/2;
break;
}
cans.fillStyle = color;
cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//大矩形
cans.fillRect(pointArr[4],pointArr[5],pointArr[6],pointArr[7]);//小矩形
cans.strokeStyle = '#FFF';
cans.lineWidth = 1;
cans.beginPath();
cans.moveTo(pointArr[8],pointArr[9]);
cans.lineTo(pointArr[10],pointArr[11]);
cans.lineTo(pointArr[12],pointArr[13]);
cans.lineTo(pointArr[14],pointArr[15]);
cans.stroke();
}
//getLShape(cans,'vertical',300,300,'#D54D34');
/*
*
* @以第二个方块中心为pointX，pointY
* @point Array
* 0,1,2,3 大矩形
* 4,5,6,7 第一条分割线
* 8,9,10,11 第二个分割线线
* 12,13,14,15 第三个分割线线
* @cans obj canvas对象
* @direction str 方向
* @pointX,pointY int 旋转点坐标
* @stepLength(全) int 单个方块大小
* @color str 方块填充颜色
*
*/
function getLShape(cans,direction,pointX,pointY,color){
var pointArr = new Array();
switch(direction){
case 'up':
pointArr[0] = pointX-stepLength*3/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*4;
pointArr[3] = stepLength;
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = pointX-stepLength/2;
pointArr[7] = pointY+stepLength/2;
pointArr[8] = pointX+stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX+stepLength*3/2;
pointArr[13] = pointY-stepLength/2;
pointArr[14] = pointX+stepLength*3/2;
pointArr[15] = pointY+stepLength/2;
break;
default:
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength*3/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*4;
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = pointX+stepLength/2;
pointArr[7] = pointY-stepLength/2;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY+stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX-stepLength/2;
pointArr[13] = pointY+stepLength*3/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength*3/2;
break;
}
cans.fillStyle = color;
cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//矩形
cans.strokeStyle = '#FFF';
cans.lineWidth = 2;
cans.beginPath();
cans.moveTo(pointArr[4],pointArr[5]);
cans.lineTo(pointArr[6],pointArr[7]);
cans.stroke();
cans.beginPath();
cans.moveTo(pointArr[8],pointArr[9]);
cans.lineTo(pointArr[10],pointArr[11]);
cans.stroke();
cans.beginPath();
cans.moveTo(pointArr[12],pointArr[13]);
cans.lineTo(pointArr[14],pointArr[15]);
cans.stroke();
}
//getOShape(cans,171,325,'red');
/*
*
* @以左上第一个方块中心为pointX，pointY
* @point Array
* 0,1,2,3 大矩形
* 4,5,6,7 第一条分割线
* 8,9,10,11 第二个分割线线
* @cans obj canvas对象
* @pointX,pointY int 起始点坐标
* @stepLength(全) int 单个方块大小
* @color str 方块填充颜色
*
*/
function getOShape(cans,pointX,pointY,color){
var pointArr = new Array();
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*2;
pointArr[3] = stepLength*2;
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY+stepLength/2;
pointArr[6] = pointX+stepLength*3/2;
pointArr[7] = pointY+stepLength/2;
pointArr[8] = pointX+stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY+stepLength*3/2;
cans.fillStyle = color;
cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//矩形
cans.strokeStyle = '#FFF';
cans.lineWidth = 2;
cans.beginPath();
cans.moveTo(pointArr[4],pointArr[5]);
cans.lineTo(pointArr[6],pointArr[7]);
cans.stroke();
cans.beginPath();
cans.moveTo(pointArr[8],pointArr[9]);
cans.lineTo(pointArr[10],pointArr[11]);
cans.stroke();
}
getEShapeLib(cans,'down',171,325,'red',0);
/*
*
* @以左上第一个方块中心为pointX，pointY
* @point Array
* 0,1,2,3 第一个矩形(中心所在的矩形)
* 4,5,6,7 第二个矩形
* 8,9,10,11 第一条分割线
* 12,13,14,15 第二个分割线线
* 16,17,18,19 第三个分割线线
* @cans obj canvas对象
* @pointX,pointY int 起始点坐标
* @stepLength(全) int 单个方块大小
* @color str 方块填充颜色
* @flag int 类型（-|向下座向为1，右为0）
*
*/
function getEShapeLib(cans,direction,pointX,pointY,color,flag){
var pointArr = new Array();
switch(direction){
case 'down':
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength*3/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*2;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY-stepLength/2;
pointArr[12] = pointX-stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength/2;
if(flag==1){
pointArr[4] = pointX-stepLength*3/2;
pointArr[5] = pointY+stepLength/2;
pointArr[6] = stepLength*2;
pointArr[7] = stepLength;
pointArr[16] = pointX-stepLength/2;
pointArr[17] = pointY+stepLength/2;
pointArr[18] = pointX-stepLength/2;
pointArr[19] = pointY+stepLength*3/2;
}else{
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY+stepLength/2;
pointArr[6] = stepLength*2;
pointArr[7] = stepLength;
pointArr[16] = pointX+stepLength/2;
pointArr[17] = pointY+stepLength/2;
pointArr[18] = pointX+stepLength/2;
pointArr[19] = pointY+stepLength*3/2;
}
break;
case 'up':
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*2;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY-stepLength/2;
pointArr[12] = pointX-stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength/2;
if(flag==1){
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY-stepLength*3/2;
pointArr[6] = stepLength*2;
pointArr[7] = stepLength;
pointArr[16] = pointX+stepLength/2;
pointArr[17] = pointY-stepLength*3/2;
pointArr[18] = pointX+stepLength/2;
pointArr[19] = pointY-stepLength/2;
}else{
pointArr[4] = pointX-stepLength*3/2;
pointArr[5] = pointY-stepLength*3/2;
pointArr[6] = stepLength*2;
pointArr[7] = stepLength;
pointArr[16] = pointX-stepLength/2;
pointArr[17] = pointY-stepLength*3/2;
pointArr[18] = pointX-stepLength/2;
pointArr[19] = pointY-stepLength/2;
}
break;
case 'left':
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*2;
pointArr[3] = stepLength;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX-stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY-stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength/2;
if(flag==1){
pointArr[4] = pointX-stepLength*3/2;
pointArr[5] = pointY-stepLength*3/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength*2;
pointArr[16] = pointX-stepLength*3/2;
pointArr[17] = pointY-stepLength/2;
pointArr[18] = pointX-stepLength/2;
pointArr[19] = pointY-stepLength/2;
}else{
pointArr[4] = pointX-stepLength*3/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength*2;
pointArr[16] = pointX-stepLength*3/2;
pointArr[17] = pointY+stepLength/2;
pointArr[18] = pointX-stepLength/2;
pointArr[19] = pointY+stepLength/2;
}
break;
default://right
pointArr[0] = pointX-stepLength*3/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*2;
pointArr[3] = stepLength;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX-stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY-stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength/2;
if(flag==1){
pointArr[4] = pointX+stepLength/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength*2;
pointArr[16] = pointX+stepLength/2;
pointArr[17] = pointY+stepLength/2;
pointArr[18] = pointX+stepLength*3/2;
pointArr[19] = pointY+stepLength/2;
}else{
pointArr[4] = pointX+stepLength/2;
pointArr[5] = pointY-stepLength*3/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength*2;
pointArr[16] = pointX+stepLength/2;
pointArr[17] = pointY-stepLength/2;
pointArr[18] = pointX+stepLength*3/2;
pointArr[19] = pointY-stepLength/2;
}
break;
}
cans.fillStyle = color;
cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//大矩形
cans.fillRect(pointArr[4],pointArr[5],pointArr[6],pointArr[7]);//小矩形
cans.strokeStyle = 'blue';
cans.lineWidth = 2;
cans.beginPath();
cans.moveTo(pointArr[8],pointArr[9]);
cans.lineTo(pointArr[10],pointArr[11]);
cans.stroke();
cans.beginPath();
cans.moveTo(pointArr[12],pointArr[13]);
cans.lineTo(pointArr[14],pointArr[15]);
cans.stroke();
cans.beginPath();
cans.moveTo(pointArr[16],pointArr[17]);
cans.lineTo(pointArr[18],pointArr[19]);
cans.stroke();
}
/*
*
* @以左上第一个方块中心为pointX，pointY
* @point Array
* 0,1,2,3 第一个矩形(中心所在的矩形)
* 4,5,6,7 第二个矩形
* 8,9,10,11 第一条分割线
* 12,13,14,15 第二个分割线线
* 16,17,18,19 第三个分割线线
* @cans obj canvas对象
* @pointX,pointY int 起始点坐标
* @stepLength(全) int 单个方块大小
* @color str 方块填充颜色
* @flag int 类型（-|向下座向为1，右为0）
*
*/
function getZShapeLib(cans,direction,pointX,pointY,color,flag){
var pointArr = new Array();
switch(direction){
case 'up':
if(flag==1){
pointArr[0] = pointX-stepLength*3/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*2;
pointArr[3] = stepLength;
pointArr[4] = pointX-stepLength/2;
pointArr[5] = pointY+stepLength/2;
pointArr[6] = stepLength*2;
pointArr[7] = stepLength;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX-stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX+stepLength/2;
pointArr[15] = pointY+stepLength*3/2;
}else{
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength*2;
pointArr[3] = stepLength;
pointArr[4] = pointX-stepLength*3/2;
pointArr[5] = pointY+stepLength/2;
pointArr[6] = stepLength*2;
pointArr[7] = stepLength;
pointArr[8] = pointX+stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX-stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX-stepLength/2;
pointArr[15] = pointY+stepLength*3/2;
}
break;
default://right
if(flag==1){
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*2;
pointArr[4] = pointX+stepLength/2;
pointArr[5] = pointY-stepLength*3/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength*2;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY+stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY+stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY-stepLength/2;
pointArr[14] = pointX+stepLength*3/2;
pointArr[15] = pointY-stepLength/2;
}else{
pointArr[0] = pointX-stepLength/2;
pointArr[1] = pointY-stepLength*3/2;
pointArr[2] = stepLength;
pointArr[3] = stepLength*2;
pointArr[4] = pointX+stepLength/2;
pointArr[5] = pointY-stepLength/2;
pointArr[6] = stepLength;
pointArr[7] = stepLength*2;
pointArr[8] = pointX-stepLength/2;
pointArr[9] = pointY-stepLength/2;
pointArr[10] = pointX+stepLength/2;
pointArr[11] = pointY-stepLength/2;
pointArr[12] = pointX+stepLength/2;
pointArr[13] = pointY+stepLength/2;
pointArr[14] = pointX+stepLength*3/2;
pointArr[15] = pointY+stepLength/2;
}
break;
}
cans.fillStyle = color;
cans.fillRect(pointArr[0],pointArr[1],pointArr[2],pointArr[3]);//大矩形
cans.fillRect(pointArr[4],pointArr[5],pointArr[6],pointArr[7]);//小矩形
cans.strokeStyle = 'blue';
cans.lineWidth = 2;
cans.beginPath();
cans.moveTo(pointArr[8],pointArr[9]);
cans.lineTo(pointArr[10],pointArr[11]);
cans.lineTo(pointArr[12],pointArr[13]);
cans.lineTo(pointArr[14],pointArr[15]);
cans.stroke();
}
});
</script>
<body>
<canvas id="can1" width="371px" height="619px"></canvas>
<canvas id="can2" width="371px" height="619px"></canvas>
</body>
</html>