五子棋（围棋） canvas node html5 js

最新推荐文章于 2023-09-05 17:17:04 发布

rgbaflf

最新推荐文章于 2023-09-05 17:17:04 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/rgbaflf/article/details/50687180

版权

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

最低0.47元/天解锁文章

rgbaflf

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
五子棋（围棋） canvas node html5 js

client端 msg var CommonUtils = { /** * 画圆 */ drawCircle : function(ctx, x, y, r, color) {
复制链接

扫一扫