client端
<html>
<head>
<script src="http://res.yiwugou.com/res/ywgo/js/ywgo.js"></script>
<script src="js/socket.io.js"></script>
</head>
<style>
</style>
<body style="background: #D5D5D5;">
<div style="text-align: center; padding: 20px; height: 100%;">
<div style="background: #FF8C00; margin: 10px 0; padding: 10px;">
<h1 id="msg">msg</h1>
</div>
<canvas id="fiveChess"></canvas>
</div>
</body>
<script type="text/javascript">
var CommonUtils = {
/**
* 画圆
*/
drawCircle : function(ctx, x, y, r, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
//ctx.shadowOffsetX = 3; // 阴影Y轴偏移
//ctx.shadowOffsetY = 3; // 阴影X轴偏移
//ctx.shadowBlur = 14; // 模糊尺寸
//ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
},
/**
* 画圆角矩形边框
*/
drawRoundLine : function(ctx, x, y, w, h, r, lineWidth, strokeStyle) {
ctx.beginPath();
ctx.lineWidth = lineWidth || 5;
ctx.strokeStyle = strokeStyle || '#000';//线条颜色
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.arc(x + w - r, y + r, r, 3 * Math.PI / 2, 2 * Math.PI, false);
ctx.lineTo(x + w, y + h - r);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2, false);
ctx.lineTo(x + r, y + h);
ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI, false);
ctx.lineTo(x, y + r);
ctx.arc(x + r, y + r, r, Math.PI, 3 * Math.PI / 2, false);
ctx.stroke();//画线框
},
/**
* 画圆角矩形
*/
drawRoundRect : function(ctx, x, y, w, h, r, lineWidth, strokeStyle, fillStyle) {
CommonUtils.drawRoundLine(ctx, x, y, w, h, r, lineWidth, strokeStyle);
ctx.fillStyle = fillStyle || '#eee';//填充颜色
ctx.fill();//填充颜色
}
};
function ChessInfo(chess, ctx, x, y, width, height) {
this.chess = chess;
this.ctx = ctx;
this.x = x;
this.y = y;
this.width = width || 300;
this.height = height;
this.padding = 20;
this.lineWidth = 10;
this.itemHeight = 100;
this.itemRadius = 20;
this.oneX = this.x + this.padding;
this.oneY = this.y + this.padding;
this.twoX = this.x + this.padding;
this.twoY = this.y + this.padding * 2 + this.itemHeight;
this.msgX = this.x + this.padding;
this.msgY = this.y + this.padding * 3 + this.itemHeight * 2;
}
ChessInfo.prototype = {
drawOne : function(strokeStyle) {
CommonUtils.drawRoundRect(this.ctx, this.oneX, this.oneY, this.width - this.padding * 2, this.itemHeight, this.itemRadius, this.lineWidth, strokeStyle, "#B5B5B5");
CommonUtils.drawCircle(this.ctx, this.oneX + 40, this.oneY + 50, this.itemRadius, FiveChess.USER_ONE);
},
drawOneName : function(name) {
this.ctx.beginPat